Layout ve paint
Layout ve paint maliyetini öğrenirsin.
Layout maliyeti nedir?
Bir öğenin boyut veya konumu değiştiğinde tarayıcı layout (yerleşim) hesaplar. Bu işlem reflow da denir. width, height, margin, top, left, display gibi özellikler layout'u tetikler.
Layout maliyeti büyüktür: tek değişiklik tüm sayfanın dizilimini yeniden hesaplat-abilir. Bu yüzden animasyonlarda layout tetikleyen özelliklerden kaçınılır.
Paint maliyeti ve render pipeline
Paint, pikselleri ekrana çizme aşamasıdır. color, background, border-color, box-shadow paint'i tetikler. Layout kadar pahalı değildir ama yine de maliyetlidir.
Composite en ucuz aşamadır: tarayıcı katmanları birleştirir. transform ve opacity yalnız composite'i tetikler. Bu yüzden animasyonlarda bu ikisi tercih edilir. transform: translateX(...) yazmak, left: ... yazmaktan daha hızlıdır.
Uygulama Animasyonu transform ile yaz
Aşağıdaki CSS'i tamamla. .nav bildirimine transform: translateX(100px) ve transition: transform 0.3s ease bildirimlerini ekle. Böylece animasyon layout tetiklemeden çalışır.
Örnek çözümü göster
/* yeni: transform animasyonu */
.nav {
transform: translateX(100px);
transition: transform 0.3s ease;
}Kendini test et
-
Hangi değişiklik layout hesaplamasını tetikler?
/* hangisi en pahalı? */ .box { ___: 200px; }- width
- color
- opacity
- transform
Cevabı göster
width — Doğru. width kutunun boyutunu değiştirir; tarayıcı tüm dizilimi yeniden hesaplar.
-
Animasyon için layout tetiklemeyen özelliği yaz
.nav { /* layout yerine composite */ ____: translateX(100px); }Cevabı göster
.nav { /* layout yerine composite */ transform: translateX(100px); } -
Özelliği tetiklediği aşamaya eşle
- width
- Layout hesaplar
- color
- Paint çizer
- transform
- Composite (hareket)
- opacity
- Composite (saydamlık)