Was ist besser: Reflow oder Redraw?

Neuzeichnen ist effizienter als Neufließen. Wenn häufige Reflow-Vorgänge vermieden werden können, wird die Leistung der Seite verbessert, da Reflow ein relativ leistungsintensiver Vorgang ist, da dadurch der gesamte Rendering-Baum neu erstellt wird, während für das Neuzeichnen nur Elemente auf der Seite neu gezeichnet werden müssen muss das Layout neu berechnen.

Das Betriebssystem dieses Tutorials: Windows 10-System, Dell G3-Computer.

Reflow und Repaint sind zwei wichtige Prozesse, wenn der Browser die Seite rendert.

Reflow bezieht sich auf den Prozess, bei dem der Browser das Layout der Elemente neu berechnen und die Seite neu zeichnen muss, wenn sich Größe, Position usw. von DOM-Elementen ändern. Reflow ist ein relativ leistungsintensiver Vorgang, da dabei der gesamte Renderbaum neu erstellt wird.

Neuzeichnen bedeutet, dass der Browser, wenn sich der Stil eines Elements (z. B. Farbe, Hintergrund usw.) ändert, das Element nur auf der Seite neu zeichnen muss, ohne das Layout neu zu berechnen. Im Vergleich zum Reflow verursacht das Neuzeichnen einen geringeren Leistungsaufwand.

Aus Sicht der Leistung ist das Neuzeichnen effizienter als das Neufließen. Wenn häufige Reflow-Vorgänge vermieden werden können, wird die Leistung der Seite verbessert.

Aber in der tatsächlichen Entwicklung lassen sich Reflow und Neuzeichnen nur schwer vollständig vermeiden. Einige Vorgänge (z. B. das Ändern der Größe, Position, des Stils usw.) von Elementen führen unweigerlich zu einem Umfließen oder Neuzeichnen. Daher müssen wir beim Schreiben von Code häufige Reflow-Vorgänge minimieren, die auf folgende Weise optimiert werden können:

1. Verwenden Sie die Transformationseigenschaft von CSS anstelle von oben/links für die Positionsanpassung, da die Transformation keinen Reflow auslöst.
2. Nehmen Sie DOM-Elemente, die mehrere Vorgänge erfordern, offline, indem Sie beispielsweise ihre Positionseigenschaft auf „absolut“ setzen, und fügen Sie sie nach Abschluss des Vorgangs auf einmal wieder in den Dokumentstrom ein.
3. Die Verwendung von Dokumentfragmenten (DocumentFragment) für DOM-Vorgänge kann die Anzahl der Reflows reduzieren.
4. Vermeiden Sie die Verwendung eines Tabellenlayouts, da die Berechnung des Tabellenlayouts normalerweise mehr Reflow-Vorgänge erfordert.

Im Allgemeinen kann die ordnungsgemäße Optimierung des Codes und die Minimierung der Anzahl von Reflows und Neuzeichnungen die Leistung und das Benutzererlebnis der Seite verbessern.

Das obige ist der detaillierte Inhalt vonWas ist besser: Reflow oder Redraw?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!