Detaillierte Erläuterung der Verwendung von Repaint und Reflow in JavaScript_Grundkenntnisse

Haben Sie oft von Senioren oder einigen Front-End-Senioren gehört, dass Sie keine CSS-Wildcards * verwenden dürfen, dass das Stapeln von CSS-Selektoren drei Ebenen nicht überschreiten darf, in CSS so viele Klassenselektoren wie möglich verwenden, beim Schreiben von HTML weniger Tabellen verwenden usw Die Struktur sollte so einfach wie möglich sein – DOM-Baum. Beim Warten auf diese Ratschläge wusste ich ungefähr, dass die Verwendung von Platzhaltern oder zu vielen Ebenen von CSS-Selektoren die Leistung beeinträchtigen kann. Ich war immer verwirrt darüber, warum ich keine Tabellen-Tags verwende. Also habe ich das einfach befolgt, aber nachdem ich Repain und Reflow kennengelernt habe, stellte sich heraus, dass diese wirklich nicht oft verwendet werden können. Ok, ich hoffe, dieser Artikel ist hilfreich für Sie!

1. Was ist Repaint/Reflow?

Okay, machen wir zuerst ein Bild: den allgemeinen Workflow des Browser-Parsings

Dieses Bild sollte leicht verständlich sein und kann in vier Schritten zusammengefasst werden:

1. HTML analysieren, um einen DOM-Baum zu erstellen: Die Rendering-Engine beginnt mit dem Parsen des HTML-Dokuments und konvertiert die HTML-Tags im Baum oder die von js generierten Tags in DOM-Knoten, was als „Inhaltsbaum“ bezeichnet wird.
2. Erstellen Sie einen Rendering-Baum: Analysieren Sie das CSS (einschließlich externer CSS-Dateien und Stilelemente sowie von js generierter Stile), berechnen Sie den Stil des Knotens basierend auf dem CSS-Selektor und erstellen Sie einen weiteren Baum – den Rendering-Baum.
3. Layout-Rendering-Baum: Wird rekursiv vom Wurzelknoten aus aufgerufen, berechnet die Größe, Position usw. jedes Elements und gibt jedem Knoten die genauen Koordinaten, an denen er auf dem Bildschirm erscheinen soll.
4. Zeichnen Sie den Rendering-Baum: Durchlaufen Sie den Rendering-Baum, und jeder Knoten wird mithilfe der UI-Backend-Ebene gezeichnet.

Okay, wir können sehen, dass Repain und Reflow im dritten bzw. vierten Schritt erscheinen. Daher geben wir folgende Definition:

Jedes Element in der DOM-Struktur verfügt über eine eigene Box (Modell), die erfordert, dass der Browser nach verschiedenen Stilen (Browser, vom Entwickler definiert usw.) berechnet und die Elemente entsprechend den Berechnungsergebnissen darin platziert Dieser Prozess Dies wird als Reflow bezeichnet. Wenn die Position, Größe und andere Attribute verschiedener Felder wie Farbe, Schriftgröße usw. bestimmt werden, zeichnet der Browser diese Elemente entsprechend ihren jeweiligen Eigenschaften, sodass der Inhalt der Seite angezeigt wird Der Vorgang wird als Repaint bezeichnet.
Es ist ersichtlich, dass diese beiden Dinge für das Rendern der Seite sehr wichtig sind und sich auf die Leistung auswirken. Daher müssen wir einige häufige Vorgänge verstehen, die zu Repaint und Reflow führen, und diese sollten minimiert werden, um die Leistung zu verbessern Rendering-Geschwindigkeit.

2. Einige Vorgänge, die Repain und Reflow verursachen

Die Kosten für Reflow sind viel höher als die für Repaint. Jeder Knoten im DOM-Baum verfügt über eine Reflow-Methode. Der Reflow eines Knotens führt wahrscheinlich zum Reflow von untergeordneten Knoten oder sogar von übergeordneten Knoten und Geschwisterknoten. Auf einigen Hochleistungscomputern mag das in Ordnung sein, aber wenn es bei einem Mobiltelefon zu einem Reflow kommt, ist der Vorgang sehr mühsam und stromaufwendig.
Daher dürften die folgenden Maßnahmen relativ kostspielig sein.

• Wenn Sie DOM-Knoten hinzufügen, löschen oder ändern, führt dies zu Reflow oder Repaint.
• Wenn Sie die Position des DOM verschieben oder eine Animation erstellen.
• Wenn Sie CSS-Stile ändern.
• Wenn Sie die Fenstergröße ändern (die mobile Version hat dieses Problem nicht) oder beim Scrollen.
• Wenn Sie die Standardschriftart einer Webseite ändern.

Hinweis: „display:none“ löst einen Reflow aus, während „visibility:hidden“ nur ein „Repaint“ auslöst, da keine Positionsänderung gefunden wird.
3. Wie optimiert man?

Reflow ist unvermeidlich und die Auswirkungen von Reflow auf die Leistung können nur minimiert werden. Hier einige Vorschläge:

Ändern Sie den DOM-Stil nicht einzeln. Anstatt dies zu tun, ist es besser, die CSS-Klasse vorab zu definieren und dann den DOM-Klassennamen zu ändern:

 // 不好的写法
  var left = 10,
  top = 10;
  el.style.left = left + "px";
  el.style.top = top + "px";
  // 推荐写法
  el.className += " theclassname";

Ändern Sie das DOM, nachdem Sie es offline geschaltet haben. Zum Beispiel:
a> Verwenden Sie das documentFragment-Objekt, um das DOM im Speicher zu betreiben.
b> Geben Sie zunächst dem DOM display:none (ein Mal neu) und dann können Sie es nach Ihren Wünschen ändern. Ändern Sie es beispielsweise 100 Mal und zeigen Sie es dann erneut an.
c> Klonen Sie einen DOM-Knoten in den Speicher und ändern Sie ihn dann nach Ihren Wünschen. Nachdem die Änderung abgeschlossen ist, tauschen Sie ihn gegen den Online-Knoten aus.

Fügen Sie die Attributwerte von DOM-Knoten nicht als Variablen in die Schleife ein. Andernfalls führt dies zu einer großen Anzahl von Lese- und Schreibvorgängen für die Attribute des Knotens.

Ändern Sie DOM-Knoten auf niedrigerer Ebene so weit wie möglich. Natürlich kann das Ändern von DOM-Knoten auf niedrigerer Ebene zu einem großen Reflow-Bereich führen, aber die Auswirkungen können auch gering sein.

Wenn Sie für animierte HTML-Elemente eine feste oder absolute Position verwenden, wird der Reflow durch Ändern ihres CSS erheblich reduziert.

Verwenden Sie niemals das Tabellenlayout. Denn eine kleine Änderung kann dazu führen, dass die gesamte Tabelle neu angeordnet wird.

Interessieren Sie sich mehr für die Prinzipien von Browsern, nachdem Sie diese verstanden haben? OK, ich werde den Artikel über Browserprinzipien später aktualisieren, oder Sie können zuerst andere durchsuchen, da ich denke, dass es wirklich wichtig ist, die Browserprinzipien zu verstehen, was uns helfen kann, Websites mit besserer Leistung zu schreiben.