Zorlanmış senkron layout: DOM'a yazdıktan sonra geometri okumak

Ne oluyor

Normalde layout, JavaScript'iniz bittikten sonra, kare başına bir kez gerçekleşir. Ama DOM'u değiştirip hemen ardından bir layout özelliği — offsetWidth, scrollHeight, getBoundingClientRect(), getComputedStyle() — okursanız, cevap bekleyen değişikliğinize bağlı olduğu için tarayıcı durmak ve layout'u tam orada, senkron olarak, görevinizin içinde hesaplamak zorundadır.

Bir zorlanmış layout küçük bir sayfada ucuzdur. Büyük bir DOM'da ya da bir döngüde tekrarlandığında (ki bu layout thrashing'e dönüşür) işleyiciye yüzlerce milisaniye ekler.

Nasıl tanınır

• INP dökümünde uzun processing time, DevTools Performance'ta Layout blokları script görevinin içine yerleşmiş halde (“Forced reflow” uyarısı).
• Long Animation Frames API scriptiniz için büyük bir forcedStyleAndLayoutDuration bildirir.
• İşleyici hem DOM'u değiştirir hem de öğeleri ölçer.

Nasıl düzeltilir

• Görev içinde ilk DOM yazmasından önce tüm geometriyi oku.
• Değişmeyen ölçümleri (öğe boyutları, kapsayıcı genişliği) her olayda yeniden okumak yerine önbelleğe al.
• Bir değişiklikten sonra ölçmen gerekiyorsa, okumayı bir sonraki karenin requestAnimationFrame'ine ertele veya geometriyi yoklamak yerine ResizeObserver / IntersectionObserver kullan.

Sorun

grid.style.width = next + "px"            // write: layout is now dirty
const rect = cell.getBoundingClientRect()  // read → forced synchronous layout

Çözüm

const rect = cell.getBoundingClientRect()  // read first, layout is clean
grid.style.width = next + "px"             // write after; browser lays out
                                           // once, before the next paint