Wymuszony synchroniczny layout: odczyt geometrii po zapisie do DOM

Co się dzieje

Normalnie układ następuje po zakończeniu Twojego JavaScriptu, raz na klatkę. Ale jeśli zmienisz DOM, a następnie natychmiast odczytasz właściwość układu — offsetWidth, scrollHeight, getBoundingClientRect(), getComputedStyle() — przeglądarka musi się zatrzymać i policzyć układ w tym miejscu, synchronicznie, w Twoim zadaniu, bo odpowiedź zależy od Twojej oczekującej zmiany.

Jeden wymuszony układ jest tani na małej stronie. Na dużym DOM lub powtarzany w pętli (co staje się layout thrashing) dodaje obsłudze setki milisekund.

Jak rozpoznać

• Długi processing time w rozbiciu INP, z blokami Layout zagnieżdżonymi w zadaniu skryptu w DevTools Performance (ostrzeżenie „Forced reflow”).
• Long Animation Frames API zgłasza duży forcedStyleAndLayoutDuration dla Twojego skryptu.
• Obsługa jednocześnie zmienia DOM i mierzy elementy.

Jak naprawić

• Odczytaj całą geometrię przed pierwszym zapisem do DOM w zadaniu.
• Buforuj pomiary, które się nie zmieniają (rozmiary elementów, szerokość kontenera), zamiast odczytywać je ponownie przy każdym zdarzeniu.
• Jeśli musisz mierzyć po zmianie, odłóż odczyt do requestAnimationFrame następnej klatki lub użyj ResizeObserver / IntersectionObserver zamiast odpytywać geometrię.

Problem

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

Poprawka

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