Animasyonlar ve performans

Animasyonlar iyi performans göstermelidir. Aksi takdirde kullanıcı deneyimini olumsuz yönde 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 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 canlandırmak 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 hale getirmekten kaçınmalısınız. Çoğu modern tarayıcıda bu, animasyonları opacity veya transform ile sınırlamak anlamına gelir. Bu iki seçenek de tarayıcı tarafından yüksek oranda optimize edilebilir. Animasyonun JavaScript veya CSS tarafından işlenmesi önemli değildir.

Yüksek performanslı animasyonlar oluşturma hakkındaki kılavuzun tamamını okuyun.

will-change özelliğini kullanma

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 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ı yapacak.

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 "birleştirici 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. 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ı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ü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. 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.