Reflow reduzieren

• Originaltext: Browser-Reflow minimieren
• Autor: Lindsey Simon
• Übersetzung: Ytzong

Der Prozess, bei dem der Browser die Positionen und Geometrien von Seitenelementen neu berechnet, um einen Teil oder die gesamte Seite neu zu rendern, wird als Reflow bezeichnet. Da Reflow ein benutzerblockierender Vorgang im Browser ist, ist es wichtig zu verstehen, wie die Anzahl der Reflows reduziert werden kann und wie sich unterschiedliche Dokumentattribute (DOM-Tiefe, CSS-Effizienz, Stiländerungen ohne Typ) auf die Anzahl der Reflows auswirken sehr notwendig für Entwickler. Manchmal wird ein Element in einer Reflow-Seite sein übergeordnetes Element (Anmerkung: Plural hier) und alle untergeordneten Elemente neu umfließen.

Es gibt verschiedene Benutzervorgänge und DHTML-Änderungen, die einen Reflow auslösen können. Durch Anpassen der Größe des Browserfensters, Verwenden von Javascript zum Berechnen von Stilen ( berechnete Stile ), Erstellen und Löschen von Elementen im DOM und Ändern der Elementklasse wird ein Reflow ausgelöst. Es ist zu beachten, dass einige Vorgänge einen Reflow mehrmals auslösen, was Ihre Vorstellungskraft übersteigt. Das folgende Bild stammt aus Steve Souders‘ Rede „ Even Faster Web Sites “:

Aus der obigen Tabelle ist ersichtlich, dass nicht alle JavaScript-gesteuerten Stile in allen Browsern einen Reflow auslösen, und selbst wenn sie ausgelöst werden, ist die Häufigkeit nicht gleich. Gleichzeitig ist zu erkennen, dass moderne Browser die Anzahl der Reflows immer besser kontrollieren können.

Bei Google messen wir die Geschwindigkeit unserer Seiten und Webanwendungen auf verschiedene Weise. Reflow ist ein Schlüsselfaktor, den wir beim Hinzufügen einer Benutzeroberfläche berücksichtigen. Wir sind bestrebt, ein lebendiges, interaktives und angenehmes Benutzererlebnis zu bieten.

grundsätzlich

Hier sind einige Grundsätze zur Reduzierung des Reflows:

1. Reduzieren Sie unnötige DOM-Ebenen (DOM-Tiefe). Das Ändern einer Ebene im DOM-Baum führt zu Änderungen auf allen Ebenen, bis zum Stamm und bis zu den untergeordneten Knoten des geänderten Knotens. Dies führt dazu, dass viel Zeit für die Durchführung des Reflows aufgewendet wird.
2. CSS-Regeln minimieren und nicht verwendetes CSS entfernen.
3. Wenn Sie komplexe Präsentationsänderungen, wie z. B. Animationen, vornehmen, nehmen Sie diese aus dem Dokumentenfluss heraus. Verwenden Sie zum Abschluss die absolute Positionierung oder die feste Positionierung.
4. Vermeiden Sie unnötig komplexe CSS-Selektoren, insbesondere Nachkommen-Selektoren, da passende Selektoren mehr CPU verbrauchen.

Im Video unten (Anmerkung: Zitiert von YouTube, kann nicht angesehen werden, bitte gehen Sie zum Originaltext, um die Wand zu umgehen) stellt Lindsey einige Methoden zur Reduzierung des Reflows vor.

Weiterführende Literatur

• Mozillas Hinweise zum HTML-Reflow
• Operas Repaints und Reflows
• Satoshi Ueyamas Debug-Firefox-Reflow-Demos:
  • google.co.jp Reflow
  • mozilla.org-Reflow
  • ja.wikipedia.org Reflow
• Nicole Sullivan über Reflows und Repaints

Originalübersetzung: http://www.99css.com/2009/06/minimizing-browser-reflow.html