Modern tarayıcılar iki CSS özelliğini düşük maliyetle canlandırabilir: transform ve opacity.
Başka bir öğeyi animasyona dönüştürürseniz saniyede 60 kare (FPS) gibi akıcı bir hıza ulaşamayabilirsiniz.
Bunun nedeni bu yayında açıklanmıştır.
Animasyon performansı ve kare hızı
Web'de herhangi bir öğeyi animasyonlu hale getirirken hedefin 60 FPS kare hızı olduğu yaygın olarak kabul edilir. Bu kare hızı, animasyonlarınızın sorunsuz görünmesini sağlar. Web'de kare, ekranı güncellemek ve yeniden boyamak için gereken tüm işlemlerin yapılması için geçen süredir. Her kare 16,7 ms (1000 ms / 60 ≈ 16,7) içinde tamamlanmazsa kullanıcılar gecikmeyi algılar.
Oluşturma ardışık düzeni
Bir web sayfasında bir öğeyi görüntülemek için tarayıcının aşağıdaki sıralı adımları uygulaması gerekir:
- Stil: Öğeler için geçerli olan stilleri hesaplar.
- Düzen: Her öğenin geometrisini ve konumunu oluşturun.
- Boya: Her öğenin piksellerini doldurun.
- Kompozit: Öğeleri katmanlara ayırın ve katmanları ekrana çizin.
Bu dört adım, tarayıcının oluşturma ardışık düzeni olarak bilinir.
Zaten yüklenmiş bir sayfadaki bir öğeyi animasyonlu hale getirdiğinizde bu adımların tekrarlanması gerekir. Bu işlem, animasyonun gerçekleşmesi için değiştirilmesi gereken adımdan başlar.
Daha önce de belirtildiği gibi bu adımlar sıralı olarak uygulanır. Örneğin, düzeni değiştiren bir öğeyi animasyonlu hale getirirseniz boyama ve birleştirme adımlarının da tekrar çalıştırılması gerekir. Bu nedenle, düzeni değiştiren bir öğenin animasyonu, yalnızca birleştirme işlemini değiştiren bir öğenin animasyonundan daha pahalıdır.
Düzen özelliklerine animasyon uygulama
Düzen değişiklikleri, değişiklikten etkilenen tüm öğelerin geometrisinin (konum ve boyut) hesaplanmasını içerir.
Bir öğeyi değiştirirseniz diğer öğelerin geometrisinin yeniden hesaplanması gerekebilir.
Örneğin, <html> öğesinin genişliğini değiştirirseniz alt öğelerinden herhangi biri etkilenebilir.
Öğelerin taşması ve birbirini etkilemesi nedeniyle, ağacın alt kısmındaki değişiklikler bazen en üstteki sayfaya kadar tüm sayfa düzeni hesaplamalarının yeniden yapılmasına neden olabilir.
Görünür öğe ağacı ne kadar büyükse düzen hesaplamalarının yapılması o kadar uzun sürer.
Boya özelliklerine animasyon ekleme
Boyama, öğelerin ekrana hangi sırayla boyanacağını belirleme işlemidir. Genellikle ardışık düzendeki tüm görevler arasında en uzun süre çalışan görevdir.
Modern tarayıcılarda boyamanın büyük kısmı yazılım rasterleştiricilerinde yapılır. Uygulamanızdaki öğelerin katmanlara nasıl gruplandırıldığına bağlı olarak, değişen öğenin yanı sıra diğer öğelerin de boyanması gerekebilir.
Bileşik mülklere animasyon uygulama
Oluşturma, sayfayı katmanlara ayırma, sayfanın nasıl görünmesi gerektiğiyle ilgili bilgileri piksele dönüştürme (rasterleştirme) ve sayfa oluşturmak için katmanları bir araya getirme (oluşturma) işlemidir.
Bu nedenle opacity mülkü, animasyon oluşturmanın maliyeti düşük olan öğeler listesine dahildir.
Bu mülk kendi katmanında olduğu sürece, bu mülkte yapılan değişiklikler, oluşturma adımı sırasında GPU tarafından işlenebilir.
Chromium tabanlı tarayıcılar ve WebKit, opacity üzerinde CSS geçişi veya animasyonu olan tüm öğeler için yeni bir katman oluşturur.
Katman nedir?
Animasyonlu olacak veya geçiş yapılacak öğeleri yeni bir katmana yerleştirerek tarayıcının diğer her şeyi değil, yalnızca bu öğeleri yeniden boyaması gerekir. Photoshop'un birlikte taşınabilen bir grup öğe içeren katman kavramına aşina olabilirsiniz. Tarayıcı oluşturma katmanları bu fikre benzer.
Tarayıcı, yeni bir katmanda hangi öğelerin yer alması gerektiğine karar verme konusunda iyi bir iş çıkarsa da bir öğeyi atlarsa katman oluşturmayı zorlamanın yolları vardır. Bu konuda bilgi edinmek için Yüksek performanslı animasyon oluşturma başlıklı makaleyi inceleyin. Ancak her katman bellek kullandığından yeni katmanlar dikkatli bir şekilde oluşturulmalıdır. Sınırlı belleğe sahip cihazlarda yeni katman oluşturmak, çözmeye çalıştığınız performans sorunundan daha fazla soruna neden olabilir. Ayrıca her katmanın dokularının GPU'ya yüklenmesi gerekir. Bu nedenle, CPU ile GPU arasındaki bant genişliği kısıtlamalarına rastlayabilirsiniz.
CSS ve JavaScript performansı
Animasyonlar için CSS mi yoksa JavaScript mi kullanmak performans açısından daha iyidir?
CSS tabanlı animasyonlar ve Web Animasyonları (API'yi destekleyen tarayıcılarda), genellikle kompozitö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ş akışında 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.
Bu makalede açıklandığı gibi, dönüştürme ve opaklıkta yapılan diğer değişiklikler de çoğu 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ışması gerekir. Bu durum hem CSS hem de JavaScript animasyonları için geçerlidir. Ayrıca, düzen veya boyamanın ek maliyeti, CSS veya JavaScript yürütmeyle ilişkili tüm çalışmaları gölgede bırakarak sorunun anlamsız hale gelmesine neden olur.