Neuzeichnen und Umfließen in der Rendering-Phase: Welches ist wirkungsvoller?

Neuzeichnen und Reflow: Welches wirkt sich auf die Rendering-Phase aus?

In der Frontend-Entwicklung war die Leistungsoptimierung schon immer ein wichtiges Thema. Unter anderem ist die Reduzierung von Repaint- und Reflow-Vorgängen der Schlüssel zur Verbesserung der Seitenleistung. Allerdings sind sich viele Entwickler über das Konzept und die Auswirkungen von Redraw und Reflow nicht im Klaren. In diesem Artikel werden die Konzepte von Redraw und Reflow und ihre Auswirkungen auf die Rendering-Phase detailliert beschrieben und anhand konkreter Codebeispiele veranschaulicht.

Lassen Sie uns zunächst die Konzepte des Neuzeichnens und Reflows verstehen. Beim Neuzeichnen handelt es sich um einen Vorgang, der das Erscheinungsbild eines Elements ändert, ohne seine Layouteigenschaften zu beeinflussen. Ändern Sie beispielsweise die Hintergrundfarbe, die Schriftfarbe usw. Unter Reflow versteht man das Ändern der Layoutattribute von Elementen, z. B. das Ändern der Größe, Position usw. von Elementen. Wenn wir Änderungen am DOM vornehmen, führt der Browser Neuzeichnungs- und Reflow-Vorgänge durch, um die Seite zu aktualisieren.

Häufige Neuzeichnungen und Reflows führen zu Leistungseinbußen. Zunächst lösen Neuzeichnen und Reflow die erneute Ausführung der Rendering-Pipeline aus, was eine bestimmte Menge an Rechenressourcen verbraucht. Zweitens führt das Neuzeichnen und Umfließen dazu, dass die Seite neu gezeichnet wird, was zu einem Flackern oder Einfrieren der Seite führen kann, was den Benutzern ein schlechtes Erlebnis beschert. Daher ist die Reduzierung von Neuzeichnungs- und Reflow-Vorgängen von entscheidender Bedeutung für die Verbesserung der Seitenleistung und des Benutzererlebnisses.

Als nächstes verwenden wir spezifische Codebeispiele, um die Auswirkungen von Redraw und Reflow auf die Rendering-Phase zu veranschaulichen. Angenommen, wir haben eine Liste, jedes Listenelement darin hat einen Stil mit Klassenelement und wir möchten die Hintergrundfarbe jedes Listenelements ändern:

<ul id="list">
  <li class="item">列表项1</li>
  <li class="item">列表项2</li>
  <li class="item">列表项3</li>
  <li class="item">列表项4</li>
</ul>

Zuerst verwenden wir JavaScript, um die Hintergrundfarbe des Listenelements zu ändern:

var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
    items[i].style.backgroundColor = 'red';
}

Der obige Code führt dazu, dass der Browser einen Neuzeichnungsvorgang durchführt. Beim Ändern der Hintergrundfarbe jedes Listenelements werden nur die Darstellungsattribute des Elements geändert und die Layoutattribute des Elements nicht beeinflusst.

Als nächstes ändern wir den Code erneut und ändern den Vorgang zum Ändern der Hintergrundfarbe in das Ändern der Größe des Elements:

var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
    items[i].style.width = '100px';
    items[i].style.height = '100px';
}

Dieser Code löst den Reflow-Vorgang aus, da wir die Größe des Elements ändern, was sich auf das auswirkt Layoutattribute des Elements.

Wie Sie dem obigen Codebeispiel entnehmen können, haben Neuzeichnungs- und Reflow-Vorgänge unterschiedliche Auswirkungen auf die Rendering-Phase. Durch das Neuzeichnen werden nur die Darstellungseigenschaften des Elements geändert, während durch das Neuzeichnen die Layouteigenschaften des Elements geändert werden. In der tatsächlichen Entwicklung sollten wir versuchen, häufige Neuzeichnungs- und Reflow-Vorgänge zu vermeiden. Wir können Leistungsverluste durch die folgenden Optimierungsmethoden reduzieren:

1 Verwenden Sie CSS-Eigenschaften wie Transformation und Animation, um Animationseffekte zu erzielen, die keinen Reflow-Vorgang auslösen , bessere Leistung.
2. Reduzieren Sie die Anzahl der Neuzeichnungen und Reflows, indem Sie das DOM stapelweise ändern.
3. Verwenden Sie DocumentFragment, um die Anzahl der DOM-Operationen zu reduzieren und mehrere DOM-Operationen zu einer zusammenzuführen.

Zusammenfassend lässt sich sagen, dass Neuzeichnen und Umfließen wichtige Faktoren sind, die sich auf die Seitenleistung auswirken. Entwickler sollten ihre Konzepte und Auswirkungen verstehen, den Code richtig optimieren und das Auftreten von Neuzeichnungs- und Reflow-Vorgängen reduzieren, um die Seitenleistung und das Benutzererlebnis zu verbessern.

Referenz:

• [Browser-Rendering-Optimierung: Funktionsweise von Browsern](https://developers.google.com/web/fundamentals/performance/rendering?hl=zh-cn#maintain-style-consistency)
• [ Repaint und Reflow in JavaScript verstehen](https://medium.com/reloading/javascript-start-up-performance-69200f43b201#.du2iynrih)

Das obige ist der detaillierte Inhalt vonNeuzeichnen und Umfließen in der Rendering-Phase: Welches ist wirkungsvoller?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!