Was ist Reflow und Neuzeichnen?

Reflow bedeutet, dass der Browser die Position und Größe der Elemente im Rendering-Baum neu berechnen muss, wenn sich das Layout der Seite ändert. Dieser Prozess umfasst das Durchlaufen des Rendering-Baums, das Berechnen der geometrischen Eigenschaften jedes Elements und das anschließende Aktualisieren Beim Reflow handelt es sich um einen sehr leistungsintensiven Vorgang, da er den Browser dazu veranlasst, die gesamte Seite weiterzuleiten. Beim Neuzeichnen muss der Browser die betroffenen Elemente nicht neu zeichnen, sondern nur das Erscheinungsbild der Elemente neu zeichnen Weniger Aufwand.

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

Reflow und Neuzeichnen sind sehr wichtige Konzepte bei der Optimierung der Webseitenleistung. Bevor wir diese beiden Konzepte verstehen, müssen wir zunächst den Prozess des Browser-Renderings von Seiten verstehen.

Wenn der Browser eine Webseite lädt, analysiert er das HTML-Dokument in einen DOM-Baum und analysiert dann die CSS-Stile in einen CSSOM-Baum. Als nächstes führt der Browser den DOM-Baum und den CSSOM-Baum zu einem Renderbaum (Render Tree) zusammen. Schließlich gestaltet und zeichnet der Browser die Seite entsprechend dem Rendering-Baum.

Reflow bedeutet, dass der Browser die Position und Größe der Elemente im Rendering-Baum neu berechnen muss, wenn sich das Layout der Seite ändert. Dieser Prozess umfasst das Durchlaufen des Renderbaums, das Berechnen der geometrischen Eigenschaften jedes Elements und das anschließende Aktualisieren des Layouts. Reflow ist ein sehr leistungsintensiver Vorgang, da er den Browser dazu veranlasst, die gesamte Seite weiterzuleiten.

Repaint bedeutet, dass der Browser die betroffenen Elemente neu zeichnen muss, wenn sich der Stil der Seite ändert. Beim Neuzeichnen sind keine Layoutberechnungen erforderlich, es muss lediglich das Erscheinungsbild des Elements neu gezeichnet werden. Im Vergleich zum Reflow verursacht das Neuzeichnen einen geringeren Leistungsaufwand.

Das häufige Auftreten von Reflows und Neuzeichnungen führt zu einer Verschlechterung der Seitenleistung. Daher ist es notwendig, die Anzahl der Reflows und Neuzeichnungen in der Webentwicklung zu minimieren. Im Folgenden sind einige häufige Vorgänge aufgeführt, die zum Umfließen und Neuzeichnen führen:

1 Ändern Sie die geometrischen Eigenschaften von DOM-Elementen, z. B. Ändern der Breite, Höhe, Position usw. des Elements.

2. Ändern Sie den Stil von DOM-Elementen, z. B. Ändern der Hintergrundfarbe, Schriftgröße usw. des Elements.

3. DOM-Elemente hinzufügen oder entfernen.

4. Ändern Sie die Größe des Browserfensters.

Um die Anzahl der Reflows und Neuzeichnungen zu reduzieren, können wir die folgenden Optimierungsstrategien anwenden:

1 Verwenden Sie das CSS-Transformationsattribut, anstatt die Position und Größe von Elementen zu ändern. Das Transformationsattribut löst keinen Reflow aus, sondern nur ein Neuzeichnen, sodass der Leistungsaufwand gering ist.

2. Ändern Sie die Stilattribute, die geändert werden müssen, mehrmals zusammen und wenden Sie sie dann auf DOM-Elemente an. Dies reduziert die Anzahl der Reflows und Neuzeichnungen.

3. Verwenden Sie Document Fragment, um DOM-Elemente stapelweise hinzuzufügen oder zu löschen. Ein Dokumentfragment ist ein temporärer DOM-Container, in dem mehrere DOM-Vorgänge platziert werden können. Anschließend wird der Inhalt des Dokumentfragments auf einmal zur Seite hinzugefügt, wodurch die Anzahl der Umflüsse verringert werden kann.

4. Um zu vermeiden, dass sich die Größe des Browserfensters häufig ändert, können Sie die Häufigkeit der Ereignisauslösung mithilfe von Drosselung oder Entprellung steuern.

Kurz gesagt, Reflow und Neuzeichnen sind Probleme, auf die man sich bei der Optimierung der Webseitenleistung konzentrieren muss. Indem wir die Anzahl der Reflows und Neuzeichnungen reduzieren, können wir die Rendering-Leistung von Webseiten verbessern und das Benutzererlebnis verbessern.

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