Modern tarayıcılar iki CSS özelliğini ucuza canlandırabilir: transform ve opacity.
Başka bir animasyon kullanırsanız, büyük olasılıkla saniyede 60 kare (FPS) gibi kusursuz bir akıcılığa sahip olmazsınız.
Bu gönderide, bu durumun nedeni açıklanmaktadır.
Animasyon performansı ve kare hızı
Web'de animasyon oluştururken hedefin 60 FPS kare hızı olduğu yaygın bir şekilde kabul edilir. Bu kare hızı, animasyonlarınızın düzgün görünmesini sağlar. Web'de çerçeve, ekranı güncellemek ve yeniden boyamak için gereken tüm işleri tamamlamak için gereken süredir. Her kare 16,7 ms. içinde tamamlanmazsa (1.000 ms. / 60 ≈ 16,7) kullanıcılar gecikmeyi algılar.
Oluşturma ardışık düzeni
Web sayfasında bir öğe görüntülemek için tarayıcının şu sıralı adımları uygulaması gerekir:
- Stil: Öğelere uygulanan stilleri hesaplayın.
- Düzen: Her bir öğe için geometriyi ve konumu oluşturun.
- Boya: Her bir öğe için pikselleri katmanlara doldurun.
- Kompozit: Katmanları ekrana çizin.
Bu dört adım, tarayıcının oluşturma ardışık düzeni olarak bilinir.
Daha önce yüklenmiş bir sayfada bir öğeyi canlandırdığınızda bu adımların tekrarlanması gerekir. Bu süreç, animasyonun gerçekleşmesi için değiştirilmesi gereken adımdan başlar.
Daha önce belirtildiği gibi, bu adımlar sıralıdır. Örneğin, düzeni değiştiren bir şeyi canlandırırsanız boyama ve birleştirme adımlarının da tekrar çalışması gerekir. Bu nedenle, düzeni değiştiren bir animasyon uygulamak, yalnızca birleştirmeyi değiştiren bir animasyondan daha pahalıdır.
Düzen özelliklerini canlandırma
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 birbirlerini etkileme biçimi nedeniyle, ağacın daha alt kısımlarında yapılan değişiklikler bazen tekrar en üste kadar düzen hesaplamaları yapılmasına neden olabilir.
Görünür öğeler ağacı ne kadar büyükse düzen hesaplamaları da o kadar uzun sürer.
Boya özelliklerine animasyon ekleme
Boya, öğelerin ekrana hangi sırayla boyanması gerektiğini 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ılardaki boyamaların büyük kısmı 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 dışında başka öğelerin de boyanması gerekebilir.
Bileşik özelliklere animasyon ekleme
Birleştirme, sayfayı katmanlara ayırma, sayfanın nasıl görünmesi gerektiği hakkındaki bilgilerin piksellere dönüştürülmesi (kafesleme) ve sayfa oluşturmak için katmanları bir araya getirme (birleştirme) işlemidir.
Bu nedenle, opacity özelliğinin canlandırması ucuz olan öğeler listesine eklenmiştir.
Bu özellik kendi katmanında olduğu sürece, ö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 ürününde CSS geçişi veya animasyon içeren tüm öğeler için yeni katman oluşturur.
Katman nedir?
Canlandırılacak veya geçiş yapılacak öğeleri yeni bir katmana yerleştirerek, tarayıcının yalnızca bu öğeleri yeniden boyaması gerekir; diğer her şeyi yeniden boyaması gerekmez. Photoshop'un, birlikte taşınabilen birçok öğeyi içeren katman kavramını biliyor olabilirsiniz. Tarayıcı oluşturma katmanları bu fikre benzer.
Tarayıcı, yeni bir katmanda hangi öğelerin bulunması gerektiğine karar verme konusunda iyi iş çıkarsa da bir katman gözden kaçırılırsa katman oluşturmayı zorlamanın yolları vardır. Bu konuda daha fazla bilgiye Yüksek performanslı animasyonlar oluşturma bölümünden ulaşabilirsiniz. Bununla birlikte, her bir katman bellek kullandığından yeni katmanlar oluştururken dikkatli olunmalıdır. Belleği sınırlı olan cihazlarda, yeni katmanlar oluşturmak, çözmeye çalıştığınızdan 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 ve GPU arasında bant genişliği kısıtlamalarına da maruz kalabilirsiniz.
CSS ve JavaScript performansı
"Performans açısından animasyonlar için CSS mi yoksa JavaScript mi kullanmak daha iyi?" sorusunu merak edebilirsiniz.
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, tarayıcının stil, düzen, boyama ve JavaScript'in yürütüldüğü ana iş parçacığından farklıdır. Bu, tarayıcı ana iş parçacığında bazı pahalı 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üşümler ve opaklıktaki diğer değişiklikler çoğu durumda birleştirici iş parçacığı tarafından da ele alınabilir.
Herhangi bir animasyon; boyamayı, düzeni veya her ikisini birden tetiklerse ana iş parçacığının çalışması gerekir. Bu, hem CSS hem de JavaScript animasyonları için geçerlidir. Düzen veya boyamanın ek yükü, CSS veya JavaScript'in yürütülmesiyle ilişkili tüm çalışmaları büyük olasılıkla engelleyerek soru taslağının oluşturulmasına neden olur.