Reflows und Repaints in Javascript

Was sind die Best Practices zur Optimierung von CSS, um unnötige Reflows und Neulackierungen zu reduzieren, insbesondere bei umfangreichen Anwendungen?

1. Reflow (Layout-Neuberechnung):

Ein Reflow (auch Layout oder Re-Layout genannt) tritt auf, wenn der Browser die Position, Größe und das Layout von Elementen auf der Seite neu berechnet. Dieser Vorgang findet jedes Mal statt, wenn sich das Layout der Seite ändert, beispielsweise wenn Elemente hinzugefügt, entfernt, in der Größe geändert oder ihre Sichtbarkeit geändert werden. Es ist ein komplexerer und zeitaufwändigerer Vorgang

Beispiel :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
const box = document.getElementById('box');
// Triggering a reflow by changing width and height
box.style.width = '200px';
box.style.height = '200px';

// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

Wann kommt es zu einem Reflow?

• Hinzufügen, Entfernen oder Ändern von DOM-Elementen (z. B. appendChild, removeChild).
• Ändern des Layouts durch Anpassen von CSS-Stilen wie Breite, Höhe, Rand, Abstand usw.
• Größe des Fensters ändern oder Größe von Elementen ändern.
• Ändern der Schriftgröße oder der Schrifteigenschaften.
• Verwendung von Methoden wie offsetWidth, offsetHeight, scrollTop, getBoundingClientRect(), da sie den Browser zwingen, das Layout neu zu berechnen.

So funktioniert Reflow:

Wenn Sie etwas ändern, das sich auf das Layout der Seite auswirkt, muss der Browser Folgendes tun:

1. Berechnen Sie die Positionen und Abmessungen neu aller von der Änderung betroffenen Elemente.
2. Erstellen Sie den Layoutbaum neu, der die interne Darstellung der Anordnung der Elemente darstellt.

Wenn viele Elemente von einer einzigen Änderung betroffen sind, kann der Reflow kostspielig sein und die Leistung Ihrer Website beeinträchtigen.

2. Neu streichen (Visuelles Update)

Ein Neuzeichnen (oder Neuzeichnen) erfolgt, wenn sich die visuellen Eigenschaften eines Elements ändern, das Layout jedoch nicht. Es ist kostengünstiger als ein Reflow, da nur das Erscheinungsbild der Elemente aktualisiert werden muss, ohne dass ihre Position oder ihr Layout neu berechnet werden müssen. Neuanstriche erfolgen, nachdem das Layout neu berechnet wurde (in Fällen, in denen beides erforderlich ist) oder wenn Eigenschaften, die sich nicht auf das Layout auswirken, wie Farbe oder Sichtbarkeit geändert werden.

Beispiel :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

Wann erfolgt ein Repaint?

• Ändern der Hintergrundfarbe, Rahmenfarbe oder Sichtbarkeitseigenschaften.
• Ändern des Boxschattens, der Kontur oder der Farbe eines Elements.
• Aktualisierung der Deckkraft (Opacity), der Transformationen (Transform) oder des Z-Index.

Ein Repaint erfordert keine Neuberechnung des Layouts, ist also schneller als ein Reflow, erfordert aber dennoch das Neuzeichnen von Teilen der Seite, was einige Zeit in Anspruch nimmt.

Die Rendering-Pipeline

1. DOM-Konstruktion: Der Browser analysiert HTML, um den DOM (Document Object Model)-Baum zu erstellen.
2. CSSOM-Konstruktion: CSS wird analysiert, um den CSSOM (CSS Object Model)-Baum zu erstellen.
3. Renderbaumkonstruktion: DOM und CSSOM werden kombiniert, um den Renderbaum zu erstellen, der die visuellen Informationen für jedes sichtbare Element enthält.
4. Layout (Reflow): Der Browser berechnet die Position und Größe jedes sichtbaren Elements im Renderbaum.
5. Malen: Der Browser füllt Pixel basierend auf den visuellen Eigenschaften wie Farben, Rahmen, Schatten usw. aus.
6. Zusammengesetzt: Der Browser setzt die verschiedenen gemalten Ebenen zusammen (für komplexe Elemente wie Animationen, 3D-Transformationen usw.) und zeigt sie auf dem Bildschirm an.

Auswirkungen auf die Leistung

• Reflow: Leistungsintensiv, insbesondere wenn es große Teile der Seite betrifft oder wiederholt ausgelöst wird (z. B. in einer Schleife oder bei der Größenänderung). Es wirkt sich auf das Layout der Seite aus und erfordert eine Neuberechnung der Positionen und Größen der Elemente.
• Neulackieren: Günstiger als ein Reflow, beeinträchtigt aber dennoch die Leistung, insbesondere wenn viele Elemente häufig neu lackiert werden müssen.

So optimieren Sie Reflows und Neulackierungen

1. DOM-Manipulation minimieren: Verwenden Sie Techniken wie Batch-DOM-Aktualisierungen (wie bereits erwähnt) oder DocumentFragment, um mehrere Änderungen gleichzeitig vorzunehmen, anstatt eins nach dem anderen.

2. Layout-Thrashing vermeiden: Wenn Sie eine Layout-Eigenschaft (z. B. offsetHeight) lesen und sofort im selben Zyklus schreiben (das Layout ändern), wird ein Reflow erzwungen, der als Layout-Thrashing bezeichnet wird. Um dies zu vermeiden, trennen Sie das Lesen und Schreiben von DOM-Eigenschaften in verschiedenen Schritten.
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   const box = document.getElementById('box');
   // Triggering a reflow by changing width and height
   box.style.width = '200px';
   box.style.height = '200px';
   
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

   Nach dem Login kopieren

   Nach dem Login kopieren

3. CSS-Klassen verwenden: Anstatt einzelne Stile zu ändern, verwenden Sie CSS-Klassen, um Änderungen vorzunehmen. Der Browser verwaltet den Klassenwechsel effizienter.
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

   Nach dem Login kopieren

   Nach dem Login kopieren

4. Reduzieren Sie die Komplexität von CSS: Vermeiden Sie tief verschachtelte Elemente und übermäßig komplexe CSS-Regeln, die Reflows auslösen können.

5. Verwenden Sie „visibility: versteckt“ statt „display: none“, wenn Sie ein Element einfach ausblenden möchten, ohne das Layout zu beeinträchtigen. „display: none“ löst einen Reflow aus, während „sichtbarkeit: versteckt“ nur ein Repaint auslöst.

Abschluss

• Reflows erfordern eine Neuberechnung des Seitenlayouts und sind im Hinblick auf die Leistung kostspieliger.
• Neuanstriche aktualisieren das visuelle Erscheinungsbild, ohne das Layout zu beeinträchtigen, und sind kostengünstiger.
• Die Minimierung beider Faktoren trägt dazu bei, dass Ihre Website reaktionsfähig und schnell bleibt und die Benutzererfahrung verbessert wird.

Das obige ist der detaillierte Inhalt vonReflows und Repaints in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!