Yeniden akış.
Yeniden akış, bir değişiklik sonrası tarayıcının sayfadaki öğelerin konum ve boyutlarını baştan hesaplamasıdır.
Bir öğenin genişliği, yüksekliği, konumu ya da yazı tipi değiştiğinde tarayıcı düzeni yeniden hesaplamak zorunda kalıyor — ve hesap genelde yalnız o öğeyle sınırlı kalmıyor, komşularını ve bazen tüm belgeyi kapsıyor.
Maliyeti iki yerde görünüyor. Sayfa yüklenirken oluşan yeniden akışlar düzen kayması üretiyor ve CLS'i bozuyor; kullanılırken oluşanlar ise ana iş parçacığını meşgul ediyor ve INP'yi bozuyor.
En sık tetikleyiciler bellidir ve çoğu kaçınılabilir.
- Boyutsuz görselin gelmesi — yer ayrılmadığı için her şey iter.
- Yazı tipi takası — metin farklı yer kaplar.
- Sonradan eklenen içerik — mevcut akışa girerse iter.
- Düzen özellikleriyle animasyon — her karede yeniden akış.
- Düzen değeri okuma ve hemen yazma — tarayıcıyı zorla hesap yapmaya iter.
Son madde JavaScript tarafının klasik tuzağı: bir öğenin boyutunu okuyup hemen ardından başka bir öğenin boyutunu değiştirmek, tarayıcıyı her döngüde yeniden hesap yapmaya zorluyor. Okumaları ve yazmaları gruplamak bu maliyeti ortadan kaldırıyor.
Animasyon tarafında kural tek cümle: yalnız dönüşüm ve opaklık kullanın. İkisi de düzeni hiç etkilemiyor, öğe kendi katmanında hareket ediyor ve komşuları yerinde kalıyor.
Tarayıcılar yeniden akış işlemlerini toplu hâlde yapmaya çalışıyor: birden fazla değişiklik biriktirilip tek seferde hesaplanıyor. Ama bir düzen değeri OKUNDUĞUNDA bu birikim bozuluyor — tarayıcı doğru cevabı verebilmek için beklemiş hesapları hemen yapmak zorunda kalıyor.
Bu yüzden JavaScript tarafında altın kural okumaları ve yazmaları gruplamak: önce tüm okumalar, sonra tüm yazmalar. Karışık sırada yapılan bir döngü, her adımda tarayıcıyı yeniden hesaba zorluyor ve maliyet öğe sayısıyla çarpılıyor.
Animasyon tarafında ise kural daha basit: yalnız dönüşüm ve opaklık kullanın. İkisi de düzeni hiç etkilemiyor, genelde ekran kartı katmanında işleniyor ve ana iş parçacığını meşgul etmiyor.
Yeniden akış ile yeniden boyama da karıştırılıyor ve maliyetleri farklı. Yalnız rengi değişen bir öğe yeniden boyanıyor ama düzen hesabı tetiklenmiyor; konumu ya da boyutu değişen bir öğe ise önce yeniden akış, sonra yeniden boyama üretiyor. İkincisi belirgin biçimde pahalı ve sayfanın ne kadarını etkilediğine bağlı olarak maliyeti katlanıyor.