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)

Sıradaki ders: Will-change

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler