HTML und CSS · Senior · Frage 6 von 75
Was ist Layout Thrashing (erzwungenes synchrones Layout)?
for (const el of items) {
el.style.width = box.offsetWidth + "px";
}- 1Wiederholtes Layout durch abwechselndes Lesen und Schreiben
- 2Wenn eine CSS-Animation von
widthdas Layout in jedem Frame neu berechnet - 3Ein Browserfehler durch einen zu tiefen DOM-Baum auf der Seite
Antwort zeigen
Richtige Antwort: Wiederholtes Layout durch abwechselndes Lesen und Schreiben
Erklärung
Das Lesen von offsetWidth nach dem Schreiben eines Styles zwingt den Browser, das Layout synchron neu zu berechnen, um einen aktuellen Wert zu liefern. In einer Schleife passiert das bei jeder Iteration. Abhilfe: zuerst alle Werte lesen, dann schreiben (Batching), oder das Lesen aus der Schleife holen. Auch Bibliotheken wie fastdom helfen.