Reflow.
Ein Reflow ist die Neuberechnung von Position und Größe der Elemente einer Seite durch den Browser nach einer Änderung.
Ändert sich Breite, Höhe, Position oder Schrift eines Elements, muss der Browser das Layout neu berechnen — und die Berechnung bleibt meist nicht auf dieses Element beschränkt, sondern umfasst seine Nachbarn und mitunter das ganze Dokument.
Die Kosten zeigen sich an zwei Stellen. Reflows während des Ladens erzeugen Layoutverschiebungen und verderben CLS; solche während der Nutzung belegen den Haupt-Thread und verderben INP.
Die häufigsten Auslöser sind bekannt, und die meisten lassen sich vermeiden.
- Ein Bild ohne Maßangaben trifft ein — es wurde kein Platz reserviert, also schiebt alles.
- Schriftwechsel — der Text nimmt anderen Raum ein.
- Nachträglich eingefügter Inhalt — gerät er in den bestehenden Fluss, schiebt er.
- Animation mit Layout-Eigenschaften — ein Reflow in jedem Frame.
- Einen Layoutwert lesen und sofort schreiben — das zwingt den Browser zur sofortigen Berechnung.
Der letzte Punkt ist die klassische Falle auf der JavaScript-Seite: Die Größe eines Elements zu lesen und unmittelbar danach die eines anderen zu ändern zwingt den Browser in jedem Durchlauf zur Neuberechnung. Lese- und Schreibvorgänge zu gruppieren beseitigt diese Kosten.
Auf der Animationsseite lautet die Regel in einem Satz: Verwenden Sie nur Transformation und Deckkraft. Keines von beiden berührt das Layout; das Element bewegt sich in seiner eigenen Ebene, und seine Nachbarn bleiben, wo sie sind.
Browser versuchen, Reflow-Arbeit zu bündeln: Mehrere Änderungen werden gesammelt und gemeinsam berechnet. Wird jedoch ein Layoutwert GELESEN, bricht diese Bündelung — um die richtige Antwort zu geben, muss der Browser die aufgeschobenen Berechnungen sofort ausführen.
Deshalb lautet die goldene Regel auf der JavaScript-Seite, Lese- und Schreibvorgänge zu gruppieren: erst alle Lesevorgänge, dann alle Schreibvorgänge. Eine Schleife in gemischter Reihenfolge erzwingt bei jedem Schritt eine Neuberechnung, und die Kosten vervielfachen sich mit der Zahl der Elemente.
Auf der Animationsseite ist die Regel einfacher: Verwenden Sie nur Transformation und Deckkraft. Keines von beiden berührt das Layout, beide werden meist in der Ebene der Grafikkarte verarbeitet, und keines belegt den Haupt-Thread.
Auch Reflow und Repaint werden verwechselt, und ihre Kosten unterscheiden sich. Ein Element, bei dem sich nur die Farbe ändert, wird neu gezeichnet, löst aber keine Layoutberechnung aus; ein Element, dessen Position oder Größe sich ändert, erzeugt erst einen Reflow und dann ein Repaint. Das Zweite ist deutlich teurer, und die Kosten wachsen mit dem Anteil der betroffenen Seite.