Yerleşim, Boyama ve Birleştirme: Görüntüleme İşlem Hattı

Oluşturma ağacı oluşturulduktan sonra tarayıcı üç aşamayı yürütür: Yerleşim (öğe boyutlarını ve konumlarını hesaplama), Boyama (pikselleri renkler, metinler ve görsellerle doldurma) ve Birleştirme (boyanmış katmanları birleştirip ekranda görüntüleme).

Yerleşim, her öğenin geometrisini; genişliğini, yüksekliğini ve x/y konumunu hesaplar. Geometriyi etkileyen özelliklerin (width, margin, padding, font-size, position) değiştirilmesi, öğe için ve olası olarak tüm alt ağacı için yerleşimi tetikler; bu, en maliyetli aşamadır.

Boyama, her katmanın piksellerini doldurur: arka planlar, kenarlıklar, metin ve gölgeler. color, background-color, visibility veya border-radius değiştirmek, yeniden yerleşim olmadan yeniden boyamayı tetikler; bu, yerleşimden daha ucuzdur ancak geniş bir alan yeniden boyanırsa yine de maliyetli olabilir.

Birleştirici, katmanları GPU kullanarak birleştirir. Yalnızca birleştirmeyi etkileyen CSS özellikleri (transform ve opacity), yerleşimi veya boyamayı tetiklemeden canlandırılabilir. GPU bunları CPU'yu çok az kullanarak 60 fps hızında işler.

csstriggers.com (artık tarayıcı tarafındaki belgeler), her tarayıcı motorunda hangi CSS özelliklerinin yerleşimi, boyamayı ve/veya birleştirmeyi tetiklediğini belgeler. Animasyon özelliklerini denetlemek için burayı kullanın. Canlandırılan özellikler için transform/opacity değerlerini tercih edin.

Yerleşim karması, JavaScript'in bir döngü içinde yerleşim özelliklerini (offsetWidth) okuma ve stil özelliklerini yazma işlemleri arasında gidip gelmesiyle oluşur. Her yazma işlemi yerleşimi geçersiz kılar; her okuma işlemi eşzamanlı bir yeniden akışı zorunlu kılar. Karmayı önlemek için tüm okuma işlemlerini tüm yazma işlemlerinden önce toplu olarak gerçekleştirin.

Öğe kendi katmanındayken yalnızca transform ve opacity tamamen birleştirici tarafından işlenir. Başka herhangi bir özelliği, hatta left/top değerlerini bile canlandırmak, ana iş parçacığında yerleşimi veya boyamayı tetikler ve takılmalara neden olabilir.

Öğelerde will-change: transform, transform/opacity üzerinde bir CSS animasyonu, birleştirici komşuları olan sabit bir konum veya 3B dönüşüm bulunduğunda tarayıcılar bu öğeleri kendi GPU katmanlarına yükseltir. Her katman GPU belleği kullanır; çok fazla katman bellek baskısına neden olur.

Boyama fırtınası, her karede sayfanın büyük bir bölümünün yeniden boyanması durumunda oluşur. Yeniden boyanan alanları belirlemek için Chrome DevTools → Oluşturma → Boyama yanıp sönmesi bölümünde profil oluşturun. Sık sık animasyon uygulanan öğeleri, yeniden boyama alanını sınırlamak için kendi katmanlarına ayırın.

Chrome DevTools'ta bir performans profili kaydedin. Alev grafiğinde Düzen, Katman ağacını güncelleme, Boyama ve Birleştirme olayları gösterilir. Uzun düzen veya boyama çubukları darboğazlara işaret eder. 60 kare/saniyeyi korumak için kare sürelerini 16 ms'nin altında tutmayı hedefleyin.

Mümkün olduğunda dönüşüm ve opaklık ile animasyon uygulayın. Ortaya çıkarma animasyonlarında genişlik/yükseklik yerine kırpma yolunu kullanın — kırpma yolu, modern tarayıcılarda birleştirici işlemciyle uyumludur. Kutu gölgesine animasyon uygulamaktan kaçının; bunun yerine opaklıkla birlikte önceden oluşturulmuş gölgeye sahip bir sözde öğe kullanın.

Düzen veya boyamayı tetiklemeden animasyon uygulanabilen iki CSS özelliği hangileridir?

Oluşturma işlem hattı — Düzen, Boyama ve Birleştirme — animasyon performansını belirler. Düzen en maliyetli işlemdir, boyama orta düzeyde maliyetlidir ve yalnızca birleştirme kullanan özellikler (dönüşüm, opaklık) GPU tarafından işlenir. Tetikleyicileri anlamak, düzenin sürekli yeniden hesaplanmasına veya boyama fırtınalarına yol açmadan akıcı 60 kare/saniyelik animasyonlar oluşturmanızı sağlar.