Modern tarayıcılar, transform ve opacity olmak üzere iki CSS özelliğini düşük maliyetle canlandırabilir.
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 düzgün 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
Web sayfasında bir şey görüntülemek için tarayıcının aşağıdaki ardışık adımları uygulaması gerekir:
- Stil: Öğeler için geçerli olan stilleri hesaplar.
- Düzen: Her öğe için geometri ve konumu oluşturun.
- Boya: Her öğenin piksellerini katmanlara doldurun.
- Birleştir: 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 özelliklere animasyon ekleme
Birleştirme, sayfayı katmanlara ayırma, sayfanın nasıl görünmesi gerektiğiyle ilgili bilgileri piksellere dönüştürme (pikselleştirme) ve katmanları bir sayfa oluşturmak için bir araya getirme (birleştirme) işlemidir.
Bu nedenle opacity mülkü, animasyon oluşturmanın maliyeti düşük olan öğeler listesine dahildir.
Bu özellik kendi katmanında olduğu sürece, bu özellikte yapılan değişiklikler 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?
Animasyonlu olacak veya yeni bir katmana geçirilecek öğeleri yerleştirerek, tarayıcının yalnızca bu öğeleri yeniden boyaması gerekir; başka her şeyi yeniden boyaması gerekmez. 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 olacağına karar verme konusunda iyi bir iş çıkarsa da, bir öğeyi gözden kaçırırsa katman oluşturmaya zorlamanın yolları vardır. Bu konuda bilgi edinmek için Yüksek performanslı animasyonlar oluşturma başlıklı makaleyi inceleyebilirsiniz. Ancak her katman bellek kullandığından yeni katmanlar dikkatli bir şekilde oluşturulmalıdır. Sınırlı belleğe sahip cihazlarda yeni katmanlar oluşturmak, çözmek istediğinizden daha büyük bir performans sorununa neden olabilir. Buna ek olarak, 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.