CSS @keyframes animasyonları web sayfasının yüklenmesini yavaşlatır mı?

web.dev sitesinden bulduğum aşağıdaki başlıklara göz atabilirsiniz.

Bazı Animasyonlar Neden Yavaş Çalışır?

Modern tarayıcılar iki CSS özelliğini ucuza canlandırabilir: transform ve opacity.
Başka bir animasyon yaparsanız, saniyede 60 kare (FPS) ipeksi pürüzsüzlükte bir hız elde edemezsiniz. Bu yazı, bunun neden böyle olduğunu açıklıyor.

Animasyon Performansı ve Kare Hızı

Web'de herhangi bir animasyon kullanılırken hedefin 60 FPS'lik bir kare hızı olduğu yaygın olarak kabul edilmektedir. Bu kare hızı, animasyonlarınızın düzgün görünmesini sağlayacaktır. Web'de bir frame, ekranı güncellemek ve yeniden render etmek için gereken tüm işleri yapmak için gereken süredir. Her frame 16.7ms (1000ms / 60 ≈ 16.7) içinde tamamlanmazsa, kullanıcılar gecikmeyi algılayacaktır.

Render İşlem Sırası

Bir web sayfasında bir şey görüntülemek için tarayıcının aşağıdaki sıralı adımlardan geçmesi gerekir:

Style: Elemente uygulanan stiller hesaplanır.
Layout: Her elemanın geometrik şekli ve konumu bulunur.
Paint: Her elementin pikselleri katmanlara doldurulur.
Composite: Katmanlar ekrana çizilir.

Bu 4 atım tarayıcıların rendering pipeline'ı olarak bilinir.
Zaten yüklenmiş bir sayfada bir şeyi anime ettiğinizde, bu adımların tekrar ele alınması gerekir. Bu süreç, animasyonun gerçekleşmesi için değiştirilmesi gereken adımdan başlar.
Daha önce yazdığım gibi, bu adımlar sıralıdır. Örneğin, layout'u değiştiren bir animasyon uygularsanız, paint ve birleştirme adımlarının da yeniden çalışması gerekir. Bu nedenle, düzeni değiştiren bir şeyi canlandırmak, yalnızca kompozisyonu değiştiren bir şeyi canlandırmaktan daha pahalıdır.Daha önce yazdığım gibi, bu adımlar sıralıdır. Örneğin, layout'u değiştiren bir animasyon uygularsanız, paint ve composite adımlarının da yeniden çalışması gerekir. Bu nedenle, layout'u değiştiren bir animasyon, yalnızca composite adımını değiştiren bir animasyondan daha maliyetlidir.

Layout Animasyon Özellikleri

Layout değişiklikleri, değişiklikten etkilenen tüm öğelerin geometrisinin (konum ve boyut) hesaplanmasını içerir. Bir elementi değiştirirseniz, diğer elemanların geometrisinin de 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 yerleşim hesaplamalarına neden olabilir.
Görünür öğelerin ağacı ne kadar büyükse, layout hesaplamalarının yapılması o kadar uzun sürer.

Paint Animasyon Özellikleri

Paint, elementlerin ekranda hangi sırayla boyanacağını belirleme işlemidir. Genellikle pipeline'daki tüm görevlerin en uzun sürenidir.
Uygulamanızdaki öğelerin katmanlar halinde nasıl gruplandığına bağlı olarak, değişenlerin yanı sıra diğer öğelerin de boyanması gerekebilir.

Composite Animasyon Özellikleri

Composite (birleştirme), sayfayı katmanlara ayırma, sayfanın nasıl görünmesi gerektiğiyle ilgili bilgileri piksellere dönüştürme ve sayfayı oluşturmak için katmanları bir araya getirme (birleştirme) işlemidir.
opacity animasyonunun maliyeti düşükler listesine dahil edilmesinin nedeni budur. Bu özellik kendi katmanında olduğu sürece, bu özellikteki değişiklikler composite (birleştirme) adımı sırasında GPU tarafından işlenebilir. Chromium tabanlı tarayıcılar ve WebKit, opacity ve transform animasyonu olan herhangi bir öğe için yeni bir katman oluşturur.

Katman nedir?

Tarayıcının, canlandırılacak veya geçişi yapılacak şeyleri yeni bir katmana yerleştirerek, diğer her şeyi değil, yalnızca bu öğeleri yeniden boyaması gerekir. Photoshop'un, birlikte hareket ettirilebilen 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 olması gerektiğine karar vermekte iyiyse de, birini kaçırırsa, katman oluşturmaya zorlamanın yolları vardır. Bunu, yüksek performanslı animasyonlar nasıl oluşturulur bölümünde bulabilirsiniz.
Ancak, her katman RAM'de (geçici bellekte) yer tutacağından, yeni katman oluştururken iyi düşünmek gerekir.
Sınırlı belleğe sahip cihazlarda yeni katmanlar oluşturmak, çözmeye çalıştığınızdan daha fazla performans sorununa neden olabilir. Ek olarak, her katmanın dokularının GPU'ya yüklenmesi gerekir. Bu nedenle, CPU ve GPU arasındaki bant genişliğininin de kısıtlamasına takılarak performans kaybı yaşayabilirsiniz.

Yüksek Performanslı CSS Animasyonları Nasıl Yapılır?

Bu kılavuz size yüksek performanslı CSS animasyonlarının nasıl oluşturulacağınızı anlatır.
Bu kılavuzun önerdiği tüm CSS özellikleri çok iyi tarayıcı uyumluluğuna sahiptir:

... Bu sayfanın içeriği çok uzun olduğu için şu an çevirecek zamanım yok ama basit bir dil kullanıldığı için kolayca anlayabilirsiniz.