Tarayıcı Nasıl Çizer — Animasyon Neden Takılıyor?

Bir kartı ekranda kaydırıyorsun. Bilgisayarında akıyor, ucuz bir telefonda takılıyor. Kod aynı, ama tarayıcının her karede yaptığı iş miktarı çok farklı olabilir.

Bir kare, dört adım

Önce stil: hangi kurallar hangi öğeye uyuyor. Sonra yerleşim?Terimin tanımını açlayout (reflow)Tarayıcının her öğenin yerini ve boyunu hesapladığı adım. left, width gibi geometri özellikleri onu yeniden çalıştırır; sonraki adımlar da peşinden gelir.Sözlükte gör →: her öğenin yeri ve boyu. Sonra boyama ile pikseller, en son birleştirme?Terimin tanımını açcompositingAyrı ayrı boyanmış katmanları üst üste koyup ekrana veren son adım. transform ve opacity değişiklikleri çoğu zaman yalnızca bu adımı çalıştırır.Sözlükte gör → ile ayrı katmanlar üst üste konur.

Bir değişiklik hangi adımdan başlarsa, ondan sonraki her adım da çalışır. Bu yüzden yerleşimden başlayan bir değişiklik en pahalısıdır.

Hangi özellik nereden başlar?

left, top, width gibi geometri özellikleri yerleşimden başlar. color ve background boyamadan başlar. transform ve opacity, öğe kendi katmanındaysa çoğu tarayıcıda yalnızca birleştirmeyi çalıştırır.

Oku, yaz, oku, yaz

Tarayıcı yerleşimi normalde karenin sonunda bir kez hesaplar. Ama bir stil yazdıktan sonra offsetHeight gibi bir boyut okursan, doğru cevabı verebilmek için yerleşimi o anda hesaplamak zorunda kalır.

Bunu bir döngüde her öğe için yaparsan yerleşim çırpınması?Terimin tanımını açlayout thrashingStil yazıp hemen boyut okumayı döngüde tekrarlamak. Her okuma yerleşimi o anda zorlar; önce hepsini okuyup sonra hepsini yazmak çözer.Sözlükte gör → olur. Çözüm basit: önce bütün okumaları, sonra bütün yazmaları yap.

Kendin gör

1. Varsayılanla oynat. left ile kaydırmak her karede dört adımın hepsini çalıştırdı.
2. Rengi değiştir. Yerleşim atlandı.
3. transform ile kaydır. Yalnızca birleştirme kaldı.
4. “oku, yaz, oku, yaz” seç. Dört zorunlu yerleşim.
5. “önce hepsini oku” seç. Tek yerleşim.

Tuzaklar

Her şeyi katmana almak. will-change: transform’u her öğeye yazmak bellek harcar ve kazancı siler. Yalnızca gerçekten hareket edecek öğeye, gerektiği süre boyunca ver.

Gizli okumalar. getBoundingClientRect, scrollTop, clientWidth ve getComputedStyle de yerleşimi zorlayabilir. Okuma olduğu her zaman açık değildir.

Göz kararı ölçmek. “Takılıyor gibi” bir ölçüm değil. DevTools’un Performance sekmesi uzun görevleri ve zorunlu yerleşimleri tek tek gösterir.

Aşağıdaki örnek bir bankacılık uygulamasının kart listesinden: açılır kapanır işlem kartları ve kayan bildirim.

1
// Reading every height first, then writing every height: one layout at the
2
// frame instead of one forced layout per card.
3
export function expandAll(cards: readonly HTMLElement[]): void {
4
  const heights = cards.map((card) => card.scrollHeight);           // all reads
5
  requestAnimationFrame(() => {
6
    cards.forEach((card, i) => {
7
      card.style.height = `${heights[i]}px`;                        // all writes
8
    });
9
  });
10
}

1
/* Slides and fades on its own layer: composite only, no layout, no paint. */
2
.toast {
3
  transform: translateY(120%);
4
  opacity: 0;
5
  transition: transform 200ms ease-out, opacity 200ms ease-out;
6
}
7

8
.toast[data-open='true'] {
9
  transform: translateY(0);
10
  opacity: 1;
11
}
12

13
/* Not this: animating bottom would run layout and paint on every frame. */
14
/* .toast { bottom: -80px; transition: bottom 200ms; } */

1
/* Respect the system setting: some readers get dizzy from motion. */
2
@media (prefers-reduced-motion: reduce) {
3
  .toast {
4
    transition: none;
5
  }
6
}

Kendini sına