HTML i CSS · Senior · Pytanie 6 z 75
Czym jest layout thrashing (wymuszony synchroniczny layout)?
for (const el of items) {
el.style.width = box.offsetWidth + "px";
}- ✓Poprawna odpowiedź: Wielokrotne przeliczanie layoutu wywołane przeplataniem odczytów i zapisów w pętli
- 2Gdy animacja CSS
widthprzelicza layout w każdej klatce - 3Błąd przeglądarki wywołany zbyt głębokim drzewem DOM na stronie
Wyjaśnienie
Odczyt offsetWidth po zapisie stylu zmusza przeglądarkę do synchronicznego przeliczenia layoutu, aby zwrócić aktualną wartość. W pętli dzieje się to w każdej iteracji. Rozwiązanie: najpierw odczytać wszystkie wartości, potem zapisywać (grupowanie odczytów/zapisów), albo wynieść odczyt poza pętlę. Pomagają też biblioteki typu fastdom.