Wenn wir im Browser die Größe, Position, Farbe usw. eines Elements ändern, führt dies dazu, dass der Browser die Seite neu berechnet und rendert. Unter diesen werden diese beiden Phasen als CSS-Reflow (Reflow) und Repaint (Repaint) bezeichnet.
CSS-Reflow bedeutet, dass der Browser die geometrischen Eigenschaften des Elements neu berechnen und den Rendering-Baum der Seite neu erstellen muss, wenn sich Größe, Layout oder Position eines DOM-Elements ändern. Reflow führt definitiv zu einem erneuten Zeichnen, aber ein erneutes Zeichnen löst nicht unbedingt einen Reflow aus.
CSS-Neuzeichnen bedeutet, dass der Browser nur das Element neu zeichnen muss, ohne das Layout neu zu berechnen, wenn die Änderung des Elementstils keine Auswirkungen auf das Layout hat. Wenn Sie beispielsweise die Farbe eines Elements ändern, wird nur ein Neuzeichnen und kein Reflow ausgelöst.
Da sowohl Reflow als auch Redraw erfordern, dass der Browser die Seite neu berechnet und rendert, führen sie zu Leistungseinbußen. Daher sollten Sie beim Schreiben von Code versuchen, häufiges Umfließen und Neuzeichnen zu vermeiden. Sie können die folgenden Optimierungsmaßnahmen ergreifen:
- Vermeiden Sie häufige Änderungen an DOM-Stilen.
- Verwenden Sie die Transformation, um oben/links und andere Vorgänge zu ersetzen, die einen Reflow verursachen.
- Verwenden Sie das Dokumentfragment (DocumentFragment), um DOM-Vorgänge auszuführen, und fügen Sie es schließlich sofort dem Dokument hinzu.
- Vermeiden Sie die Verwendung von CSS-Ausdrücken, da diese dazu führen, dass der Browser jedes Mal eine Neuberechnung durchführt.
- Vermeiden Sie es, häufig Layoutinformationen zu lesen oder Attribute wie Offset-Serien zu verwenden, da dies den Browser zum Umfließen zwingen würde.
Kurz gesagt: Das richtige Schreiben von Code und die Reduzierung von Reflow- und Neuzeichnungsvorgängen können die Seitenleistung und das Benutzererlebnis verbessern.
