Konzeptanalyse des Neuzeichnens und Reflows in Browsern

Der Inhalt dieses Artikels befasst sich mit der konzeptionellen Analyse des Neuzeichnens und Reflows in Browsern. Ich hoffe, dass er für Freunde in Not hilfreich ist.

1. Baum rendern
1. Der Browser analysiert den erhaltenen HTML-Code in einen DOM-Baum, und jedes Tag in HTML ist ein Knoten im DOM-Baum, der Wurzelknoten unser häufig verwendetes Dokumentobjekt. Der DOM-Baum enthält alle HTML-Tags, einschließlich display:none versteckt, und mit JS dynamisch hinzugefügte Elemente.

2 Der Browser analysiert alle Stile (benutzerdefiniertes CSS und Benutzeragenten) in Stilstrukturen Der Browser kann die Stile, die mit -moz beginnen, während des Analysevorgangs nicht erkennen, und Firefox entfernt Stile, die mit _ beginnen. Nach der Kombination von DOM-Baum und Stilstruktur Ein Renderbaum ähnelt dem DOM-Baum, der Unterschied ist jedoch sehr groß. Jeder Knoten des Renderbaums hat seinen eigenen Stil und der Renderbaum enthält keine versteckten Knoten als Anzeige). :keine Knoten sowie Kopfknoten), da diese Knoten nicht zum Rendern verwendet werden und keinen Einfluss auf das Rendern haben.

2. Definition von Neuzeichnen und Umfließen

Neuzeichnen
: Wenn sich der Stil des aktuellen Elements (Hintergrundfarbe, Schriftfarbe usw.) ändert, ändern wir Sie müssen nur die geänderten Elemente erneut rendern. Ein erneutes Rendern hat nur geringe Auswirkungen auf die Browserleistung und wird daher im Allgemeinen nicht berücksichtigt.

Neuzeichnen erfolgt

: Ändern Sie den Erscheinungsbildstil des Containers, z. B. Hintergrund: Schwarz usw. Das Ändern des Erscheinungsbilds hat keine Auswirkungen auf das Layout und hat keine Auswirkungen auf andere DOMs.

Reflow

: bezieht sich auf den Prozess, bei dem der Browser die Position und geometrische Struktur von Elementen im Dokument neu berechnet, um einen Teil oder das gesamte Dokument neu zu rendern. Da ein Reflow dazu führen kann, dass der gesamte DOM-Baum neu aufgebaut wird, ist er ein großer Leistungskiller.
Der Reflow eines Elements verursacht alle seine untergeordneten Elemente und die unmittelbar folgenden Vorgängerelemente im DOM Nachfolgender Reflow.

3. Vorgänge, die einen Reflow auslösen

1. Ändern der Schriftart)
3 oder Entfernen eines Stylesheets

4. Inhaltsänderungen, z. B. wenn ein Benutzer Text in ein Eingabefeld eingibt)

5. Aktivierung von CSS-Pseudoklassen wie :hover (im IE die Aktivierung von Geschwistern). Knoten-Pseudoklassen) die Pseudoklasse eines Geschwisters)

6. Das Klassenattribut manipulieren (Das Klassenattribut manipulieren)

Ein Skript, das das DOM manipuliert.

8. Berechnen von offsetWidth und offsetHeight

9. Festlegen einer Eigenschaft des Stilattributs

10. Die Leiste wird beim Ziehen und Scrollen weiter umfließen

So vermeiden Sie Reflow

1. Gemeinsam ändern: Wenn Sie den Stil eines Elements ändern möchten, können Sie alle Stile auf eine Klasse konzentrieren und diese auf einmal ändern, ohne sie zu ändern mehrmals

2. Verwenden Sie absolute 4. Verwenden Sie keine CSS-Ausdrücke 6 Steuerung
Wenn wir beispielsweise ein Element ziehen, bearbeite ich es nur, wenn sich seine x- oder y-Koordinate um 5 Pixel ändert. Dies verringert die Glätte, verbessert aber die Leistung
7. Wenn Sie es kompliziert machen möchten, ändert sich die Leistung B. Animationseffekte, implementieren Sie diese bitte außerhalb dieser Flusslinie. Verwenden Sie zur Implementierung „positionsabsolut“ oder „positionsfixiert“.
8. Da die Berechnung der OffsetWidth auch einen Reflow verursacht, verwenden wir eine Variable, um sie zu speichern.
9 Wenn wir dem Dokument Knoten hinzufügen müssen, können wir dieses Problem bei Bedarf lösen Fügen Sie dem DOM neue Elemente hinzu, legen Sie sie zuerst in einen Container und fügen Sie sie dann einheitlich hinzu, sodass nur ein Reflow auftritt

Verwandte Empfehlungen:



Zwei Möglichkeiten, sich selbst aufzurufen -Ausführen von Funktionen in js

Analysezusammenfassung von lokalen Objekten, integrierten Objekten und Hostobjekten in js

Das obige ist der detaillierte Inhalt vonKonzeptanalyse des Neuzeichnens und Reflows in Browsern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!