Minimieren des dynamischen Umbruchs in Browsern

Autorin: Lindsey Simon, UX-Entwickler

Empfohlenes Wissen: grundlegendes HTML, grundlegendes JavaScript, CSS-Kenntnisse

„Reflow“ ist der Name des Webbrowserprozesses, mit dem die Position und Geometrien von Elementen im Dokument neu berechnet werden, um einen Teil oder das gesamte Dokument neu zu rendern. Da der Reflow eine Operation im Browser blockiert, die den Nutzer blockiert, ist es für Entwickler hilfreich, zu verstehen, wie sie die Reflow-Zeit verbessern und die Auswirkungen verschiedener Dokumenteigenschaften (DOM-Tiefe, Effizienz von CSS-Regeln, verschiedene Arten von Stiländerungen) auf die Rückflusszeit verstehen können. Manchmal müssen für das Reflow eines einzelnen Elements im Dokument sowohl die übergeordneten Elemente als auch alle darauffolgenden Elemente neu angeordnet werden.

Es gibt eine Vielzahl von User-Aktionen und möglichen DHTML-Änderungen, die einen Rückfluss auslösen können. Die Größenanpassung des Browserfensters mithilfe von JavaScript-Methoden wie berechnete Stile, das Hinzufügen oder Entfernen von Elementen aus dem DOM und das Ändern der Klassen eines Elements sind u. a. Es sollte auch beachtet werden, dass einige Vorgänge möglicherweise mehr Reflow-Zeit verursachen, als Sie sich vorstellen können. Sehen Sie sich dazu das folgende Diagramm aus dem Vortrag von Steve Souders "Even Faster Web Sites" an:

Aus der Tabelle oben geht klar hervor, dass nicht alle Änderungen am Stil in JavaScript zu einem Reflow in allen Browsern führen und dass die dafür benötigte Zeit variiert. Es ist auch klar, dass moderne Browser bei Reflow-Zeiten besser werden.

Wir bei Google testen die Geschwindigkeit unserer Webseiten und Anwendungen auf verschiedene Arten. Reflow ist ein wichtiger Faktor, den wir berücksichtigen, wenn wir unseren Benutzeroberflächen neue Funktionen hinzufügen. Unser Ziel ist eine lebendige, interaktive und angenehme Nutzererfahrung.

Richtlinien

Im Folgenden finden Sie einige einfache Richtlinien, mit denen Sie den Reflow auf Ihren Webseiten minimieren können:

  1. Reduzieren Sie die unnötige DOM-Tiefe. Änderungen auf einer Ebene im DOM-Baum können Änderungen auf jeder Ebene der Baumstruktur verursachen – bis zur Stammebene und bis hin zu den untergeordneten Elementen des geänderten Knotens. Dies führt dazu, dass Sie mehr Zeit für den Reflow benötigen.
  2. Minimieren Sie CSS-Regeln und entfernen Sie nicht verwendete CSS-Regeln.
  3. Wenn du komplexe Renderingänderungen wie Animationen vornimmst, solltest du dies außerhalb des Ablaufs tun. Verwenden Sie dazu die Funktion „Position-absolut“ oder „Positionsfixiert“.
  4. Vermeiden Sie unnötige komplexe CSS-Selektoren, insbesondere untergeordnete Selektoren, die mehr CPU-Leistung für den Selektorabgleich erfordern.

In diesem Video erklärt Lindsey einige einfache Möglichkeiten, den Reflow auf Ihren Seiten zu minimieren:

Weitere Ressourcen

Feedback

War diese Seite hilfreich?