Animasyonlar ve performans

Animasyonlar iyi performans göstermelidir. Aksi takdirde kullanıcı deneyimini olumsuz etkilerler.

Animasyon kullanırken 60 fps'yi koruyun. Aksi takdirde, kullanıcılarınızın fark edebileceği ve deneyimlerini olumsuz yönde etkileyen titremeler veya tezgahlar ortaya çıkar.

  • Animasyonlarınızın performans sorunlarına neden olmadığından emin olun. Belirli bir CSS mülkünü canlandırmanın etkisini bildiğinizden emin olun.
  • Sayfanın geometrisini (düzen) değiştiren veya boyamaya neden olan özelliklere animasyon eklemek özellikle pahalıdır.
  • Mümkün olan yerlerde, değişen dönüşümlere ve opaklığa bağlı kalın.
  • Tarayıcının neyi canlandırmayı planladığınızı bilmesi için will-change kullanın.

Mülklere animasyon eklemek ücretsiz değildir ve bazı mülklerin canlandırması diğerlerinden daha ucuzdur. Örneğin, bir öğenin width ve height öğelerine animasyon uygulamak, geometrisini değiştirir ve sayfadaki diğer öğelerin hareket etmesine veya boyutlarının değişmesine neden olabilir. Bu sürece düzen (veya Firefox gibi Gecko tabanlı tarayıcılarda yeniden düzenleme) denir ve sayfanızda çok fazla öğe varsa pahalı olabilir. Düzen tetiklendiğinde, normalde sayfanın veya bir bölümünün boyanması gerekir. Bu, genellikle düzen işleminin kendisinden bile daha pahalıdır.

Mümkün olduğunda düzeni veya boyamayı tetikleyen özelliklere animasyon eklemekten kaçınmalısınız. Modern tarayıcıların çoğu için bu, animasyonların opacity veya transform ile sınırlanması anlamına gelir. Her iki tarayıcı da büyük ölçüde optimize edebilir. Animasyonun JavaScript veya CSS tarafından işlenmesi önemli değildir.

Yüksek performanslı animasyonlar oluşturmayla ilgili tam kapsamlı kılavuzu okuyun.

will-change özelliğini kullanma

Tarayıcı Desteği

  • 36
  • 79
  • 36
  • 9.1

Kaynak

Tarayıcının, bir öğenin özelliğini değiştirmeyi amaçladığınızı bildiğinden emin olmak için will-change kullanın. Bu, siz değişikliği yapmadan önce tarayıcının en uygun optimizasyonları yerine getirmesini sağlar. Bununla birlikte, will-change politikasını aşırı kullanmayın. Aksi takdirde, tarayıcının kaynakları boşa harcamasına neden olabilir ve bu da daha da fazla performans sorununa yol açabilir.

Genel kural olarak, animasyon bir kullanıcının etkileşimi veya uygulamanızın durumu nedeniyle sonraki 200 ms içinde tetiklenebilecekse, öğelere animasyon eklemek için will-change öğesinin kullanılması iyi bir fikirdir. Çoğu durumda, uygulamanızın mevcut görünümünde yer alan ve animasyon eklemek istediğiniz herhangi bir öğenin, değiştirmeyi planladığınız mülkler için will-change özelliğinin etkinleştirilmesi gerekir. Önceki kılavuzlarda kullandığımız kutu örneğinde, dönüşümler ve opaklık için will-change şu şekilde görünüyor:

.box {
  will-change: transform, opacity;
}

Artık bunu destekleyen tarayıcılar, şu anda çoğu modern tarayıcı, bu özelliklerin değiştirilmesini veya animasyonunun uygulanmasını desteklemek için arka planda uygun optimizasyonları yapacaktır.

CSS ve JavaScript performansı

Web genelinde CSS ve JavaScript animasyonlarının göreli avantajlarını performans açısından değerlendiren çok sayıda sayfa ve yorum dizisi vardır. Unutulmaması gereken birkaç nokta aşağıda belirtilmiştir:

  • CSS tabanlı animasyonlar ve yerel olarak desteklendikleri yerlerde Web Animasyonları genellikle "birleştirici iş parçacığı" olarak bilinen bir iş parçacığında işlenir. Bu, tarayıcının stil, düzen, boyama ve JavaScript'in yürütüldüğü "ana iş parçacığı"ndan farklıdır. Bu, tarayıcı ana iş parçacığında bazı pahalı görevler çalıştırıyorsa bu animasyonların kesintiye uğramadan devam edebileceği anlamına gelir.

  • Dönüşümler ve opaklıktaki diğer değişiklikler çoğu durumda birleştirici iş parçacığı tarafından da işlenebilir.

  • Herhangi bir animasyon boyamayı, düzeni veya her ikisini birden tetiklerse "ana iş parçacığının" çalışması için gerekir. Bu, hem CSS hem de JavaScript tabanlı animasyonlar için geçerlidir. Düzen veya boyamanın ek yükü, CSS veya JavaScript'in çalıştırılmasıyla ilişkili tüm çalışmaları büyük olasılıkla engelleyerek soru üzerinde düşünmeye neden olur.