Modern tarayıcılar iki CSS özelliğini uygun maliyetle canlandırabilir: transform ve opacity.
Başka bir öğeyi animasyonla hareketlendirirseniz saniyede 60 kare (FPS) hızına ulaşma ihtimaliniz düşer.
Bu yayında bunun neden böyle olduğu açıklanmaktadır.
Animasyon performansı ve kare hızı
Web'de herhangi bir öğeyi canlandırırken hedef kare hızının 60 FPS olduğu genel 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şlerin yapılması için geçen süredir. Her bir kare 16,7 ms içinde tamamlanmazsa (1000 ms / 60 ≈ 16,7) kullanıcılar gecikmeyi fark eder.
İşleme ardışık düzeni
Tarayıcının bir web sayfasında bir öğeyi görüntülemek için aşağıdaki sıralı adımları uygulaması gerekir:
- Stil: Öğelere uygulanan stilleri hesaplayın.
- Düzen: Her öğenin geometrisini ve konumunu oluşturun.
- Boya: Her öğenin piksellerini doldurun.
- Bileşik: Öğeleri katmanlara ayırın ve katmanları ekrana çizin.
Bu dört adım, tarayıcının oluşturma işlem hattı olarak bilinir.
Zaten yüklenmiş bir sayfada bir öğeyi canlandırdığınızda bu adımların tekrar gerçekleşmesi gerekir. Bu işlem, animasyonun gerçekleşmesine izin vermek için değiştirilmesi gereken adımdan başlar.
Daha önce de belirtildiği gibi bu adımlar sıralıdır. Örneğin, düzeni değiştiren bir öğeyi animasyonla hareketlendirirseniz boyama ve birleştirme adımlarının da tekrar çalıştırılması gerekir. Bu nedenle, düzeni değiştiren bir öğeyi canlandırmak, yalnızca birleştirmeyi değiştiren bir öğeyi canlandırmaktan daha maliyetlidir.
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şma ve birbirini etkileme şekli nedeniyle, ağacın daha aşağısındaki değişiklikler bazen en üste kadar tüm düzen hesaplamalarına neden olabilir.
Görünür öğelerin ağacı ne kadar büyük olursa düzen hesaplamalarının yapılması o kadar uzun sürer.
Boya özelliklerine animasyon ekleme
Çizme, öğelerin ekrana hangi sırayla çizileceğini belirleme işlemidir. Genellikle işlem hattındaki tüm görevler arasında en uzun süren görevdir.
Modern tarayıcılarda çizimlerin çoğu yazılım rasterleştiricilerde yapılır. Uygulamanızdaki öğelerin katmanlar halinde nasıl gruplandırıldığına bağlı olarak, değişen öğenin yanı sıra diğer öğelerin de boyanması gerekebilir.
Bileşik özelliklere animasyon uygulama
Birleştirme, sayfayı katmanlara ayırma, sayfanın nasıl görünmesi gerektiğiyle ilgili bilgileri piksellere dönüştürme (rasterleştirme) ve bir sayfa oluşturmak için katmanları bir araya getirme (birleştirme) işlemidir.
Bu nedenle opacity özelliği, animasyonu ucuz olan öğeler listesine dahil edilir.
Bu özellik kendi katmanında olduğu sürece, birleştirme 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?
Animasyon veya geçiş uygulanacak öğeleri yeni bir katmana yerleştirerek tarayıcının yalnızca bu öğeleri yeniden boyaması gerekir. Photoshop'taki, birlikte taşınabilen bir dizi öğe içeren katman kavramını biliyor olabilirsiniz. Tarayıcı oluşturma katmanları da benzer bir fikre dayanır.
Tarayıcı, hangi öğelerin yeni bir katmanda olması gerektiği konusunda iyi kararlar verse de bir öğeyi gözden kaçırırsa katman oluşturmayı zorlamanın yolları vardır. Bu konu hakkında bilgi edinmek için Yüksek performanslı animasyonlar oluşturma başlıklı makaleyi inceleyin. Ancak her katman bellek kullandığından yeni katmanlar dikkatli bir şekilde oluşturulmalıdır. Belleği sınırlı olan cihazlarda yeni katmanlar oluşturmak, çözmeye çalıştığınız sorundan daha büyük bir performans sorununa 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ıyla karşılaşabilirsiniz.
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 birleştirici iş parçacığı olarak bilinen bir iş parçacığında işlenir. Bu, stil oluşturma, düzen, boyama ve JavaScript'in yürütüldüğü tarayıcının ana ileti dizisinden farklıdır. Bu, tarayıcı ana ileti dizisinde bazı maliyetli görevler çalıştırıyorsa bu animasyonların kesintiye uğramadan devam edebileceği anlamına gelir.
Bu makalede açıklandığı gibi, dönüştürmeler 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 tetikliyorsa ana iş parçacığının çalışması gerekir. Bu durum hem CSS hem de JavaScript animasyonları için geçerlidir. Düzen veya boyama ile ilgili ek yük, CSS veya JavaScript yürütmeyle ilişkili tüm çalışmaları muhtemelen gölgede bırakır ve soruyu gereksiz kılar.