Animasyonlar ve performans

Animasyonlar iyi performans göstermelidir. Aksi takdirde kullanıcı deneyimini olumsuz yönde etkiler.

Paul Lewis

Sam Thorogood

Animasyon yaparken 60 fps'yi koruyun. Bu değerden daha düşük fps değerleri, kullanıcılarınız tarafından fark edilecek ve deneyimlerini olumsuz yönde etkileyecek takılmalara veya duraklamalara neden olur.

• Animasyonlarınızın performans sorunlarına neden olmamasına dikkat edin ve belirli bir CSS özelliğinin animasyonlu olmasının ne gibi etkileri olduğunu öğrenin.
• Sayfanın geometrisini (düzen) değiştiren veya boyamaya neden olan özelliklerin animasyonu özellikle maliyetlidir.
• Mümkün olduğunda dönüşümleri ve opaklığı değiştirmeye odaklanın.
• Tarayıcının, neyi animasyonlu hale getirmeyi planladığınızı bilmesi için will-change öğesini kullanın.

Mülklerin animasyonu ücretsiz değildir ve bazı mülklerin animasyonu diğerlerinden daha ucuzdur. Örneğin, bir öğenin width ve height özelliklerini animasyonlu hale getirmek geometrisini değiştirir ve sayfadaki diğer öğelerin taşınmasına veya boyutunun değişmesine neden olabilir. Bu işleme düzen (veya Firefox gibi Gecko tabanlı tarayıcılarda yeniden akış) adı verilir ve sayfanızda çok fazla öğe varsa maliyetli olabilir. Sayfa düzeni her tetiklendiğinde, sayfanın veya bir kısmının normalde boyanması gerekir. Bu işlem, genellikle sayfa düzeni işleminin kendisinden bile daha pahalıdır.

Mümkün olduğunda, düzeni veya boyamayı tetikleyen özellikleri animasyonlu kullanmaktan kaçınmalısınız. Modern tarayıcıların çoğunda bu, animasyonları opacity veya transform ile sınırlamak anlamına gelir. Tarayıcının her ikisini de yüksek oranda optimize edebilmesi için animasyonun JavaScript veya CSS tarafından işlenmesi önemli değildir.

Yüksek performanslı animasyonlar oluşturmayla ilgili kılavuzun tamamını okuyun.

will-change mülkünü kullanma

Tarayıcı desteği

• 36
• 79
• 36
• 9.1

Kaynak

Tarayıcıya bir öğenin özelliğini değiştirmek istediğinizi bildirmek için will-change öğesini kullanın. Bu sayede tarayıcı, değişikliği yapmanızdan önce en uygun optimizasyonları uygulayabilir. Ancak will-change öğesini aşırı kullanmamaya çalışın. Aksi takdirde tarayıcı kaynakları israf edebilir ve bu da daha da fazla performans sorununa neden olabilir.

Genel kural, animasyon bir kullanıcının etkileşimi veya uygulamanızın durumu nedeniyle önümüzdeki 200 milisaniye içinde tetiklenebilecekse animasyonlu öğelerde will-change kullanılmasıdır. Bu nedenle, çoğu durumda uygulamanızın mevcut görünümünde canlandırmak istediğiniz tüm öğelerde, değiştirmeyi planladığınız özellikler için will-change etkinleştirilmelidir. Önceki kılavuzlarda kullandığımız kutu örneğinde, dönüştürme ve opaklık için will-change eklemek şöyle görünür:

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

Artık bu özelliği destekleyen tarayıcılar (şu anda çoğu modern tarayıcı) bu özelliklerin değiştirilmesini veya animasyonlu hale getirilmesini desteklemek için arka planda uygun optimizasyonları yapacaktır.

CSS ve JavaScript performansı

Web'de, CSS ve JavaScript animasyonlarının performans açısından göreceli avantajlarını tartışan birçok sayfa ve yorum dizisi vardır. Aşağıdaki noktaları göz önünde bulundurun:

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

• Dönüşümler ve opaklıkta yapılan diğer değişiklikler de birçok durumda birleştirici iş parçacığı tarafından işlenebilir.

• Herhangi bir animasyon boyama, düzen veya her ikisini de tetiklerse "ana iş parçacığının" çalışma yapması gerekir. Bu durum hem CSS hem de JavaScript tabanlı animasyonlar için geçerlidir. Ayrıca, sayfa düzeni veya boyama işlemlerinin yükü, CSS veya JavaScript yürütmeyle ilişkili tüm çalışmaları gölgede bırakacağından bu soru anlamsız hale gelir.