Animasyonlar ve performans

Animasyonlar iyi performans göstermelidir, aksi takdirde kullanıcı deneyimini olumsuz etkiler.

Paul Lewis

Sam Thorogood

Animasyonlarınızda 60 fps'yi koruyun çünkü titreme veya duraklamalarda kullanıcılarınıza fark edilecek ve onların deneyimlerini olumsuz yönde etkileyecek daha az sonuç olur.

• Animasyonlarınızın performans sorunlarına neden olmamasına dikkat edin. Belirli bir CSS mülkünü animasyonlatmanın etkisini bildiğinizden emin olun.
• Sayfanın geometrisini (düzeni) değiştiren veya boyamaya neden olan animasyon özellikleri özellikle pahalıdır.
• Mümkün olduğu durumlarda, değişimlere ve opaklığa bağlı kalın.
• Tarayıcının neye animasyon eklemeyi planladığınızı bilmesi için will-change kullanın.

Özelliklere animasyon eklemek ücretsiz değildir ve bazı özelliklere animasyon eklemek diğerlerinden daha ucuzdur. Örneğin, bir öğenin width ve height animasyonlarının etkinleştirilmesi geometrisinin değişmesine ve sayfadaki diğer öğelerin taşınmasına veya boyutunun değişmesine neden olabilir. Bu işlem, düzen (veya Firefox gibi Gecko tabanlı tarayıcılarda yeniden düzenleme) olarak adlandırılır 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 da genellikle düzen işleminin kendisinden bile daha pahalıdır.

Mümkün olduğunda, düzeni veya boyamayı tetikleyen özellikleri canlandırmaktan kaçınmalısınız. Çoğu modern tarayıcı için bu, animasyonların her ikisi de tarayıcının yüksek oranda optimize edebileceği opacity veya transform ile sınırlanması anlamına gelir; animasyonun JavaScript veya CSS tarafından işlenip işlenmemesi önemli değildir.

Yüksek performanslı animasyonlar oluşturmayla ilgili kapsamlı rehberi okuyun.

will-change özelliğini kullanma

Tarayıcının, bir öğenin özelliğini değiştirmek istediğinizi bilmesi için will-change değerini kullanın. Böylece tarayıcı, siz değişikliği yapmadan önce en uygun optimizasyonları yapabilir. Ancak, will-change değerini aşırı kullanmayın. Aksi halde, tarayıcının kaynakları tüketmesine neden olabilir. Bu da daha fazla performans sorununa neden olur.

Genel kurala göre, animasyon sonraki 200 ms içinde kullanıcı etkileşimi veya uygulamanızın durumundan dolayı tetiklenebilecekse öğeleri animasyonla ilgili olarak will-change kullanmak iyi bir fikirdir. Bu durumda çoğu durumda, uygulamanızın mevcut görünümünde animasyon eklemek istediğiniz tüm öğelerde, değiştirmeyi planladığınız mülkler için will-change özelliği etkinleştirilmelidir. Önceki kılavuzlarda kullandığımız kutu örneğinde, dönüşümler ve opaklık için will-change ekleme aşağıdaki gibi görünür:

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

Artık şu anda en modern tarayıcılar olmak üzere onu destekleyen tarayıcılar, bu özelliklerin değiştirilmesini veya animasyonunu desteklemek için arka planda uygun optimizasyonları yapacaktır.

CSS ve JavaScript performansı

Web'de, CSS ve JavaScript animasyonlarının göreceli avantajlarını performans açısından ele alan çok sayıda sayfa ve yorum ileti dizisi bulunmaktadır. Aşağıdaki noktaları göz önünde bulundurun:

• CSS tabanlı animasyonlar ve yerel olarak desteklenen 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. Diğer bir deyişle, tarayıcı ana iş parçacığında bazı pahalı görevler çalıştırıyorsa bu animasyonlar kesintiye uğramadan devam edebilir.

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

• Herhangi bir animasyon boyama, düzeni veya her ikisini birden tetiklerse çalışması için "ana iş parçacığı" gerekir. Bu durum hem CSS hem de JavaScript tabanlı animasyonlar için geçerlidir ve düzen veya boyanın ek yükü, CSS veya JavaScript'in yürütülmesiyle ilişkili tüm çalışmaları muhtemelen gölgede bırakacak ve soru boşluğu oluşturacaktır.