Um Teil oder gesamte Seite erneut zu rendern, wird der Prozess der neu berechnen Seitenelementpositionen und Geometrien als Reflow bezeichnet. Da Reflow in einem Browser ein Benutzerblockerbetrieb ist, ist es für Entwickler sehr erforderlich, zu verstehen, wie die Anzahl der Reflexionen und die Auswirkungen verschiedener Dokumentenattribute (DOM-Tiefe, CSS-Effizienz und keine Art der Stiländerungen) auf die Anzahl der Reflexe reduziert werden können. Manchmal wird ein einzelnes Element auf der Reflow -Seite sein übergeordnetes Element und alle untergeordneten Elemente reflowern.
Es gibt mehrere Benutzeraktionen und DHTML -Änderungen, die Reflow auslösen können. Größen Sie die Größe des Browserfensters, verwenden Sie JavaScript, um Stile zu berechnen, löschende Elemente im DOM zu erstellen und die Klasse des Elements zu ändern, löst den Reflow aus. Es ist erwähnenswert, dass einige Operationen den Reflow über Ihre Vorstellungskraft hinaus auslösen. Das folgende Bild stammt von Steve Souders 'Rede noch schnellere Websites:
Aus der obigen Tabelle ist ersichtlich, dass nicht alle von Javascript-kontrollierten Stile in allen Browsern den Reflow auslösen, auch wenn die Anzahl der Auslöser ausgelöst wird. Gleichzeitig ist ersichtlich, dass modernen Browsern immer besser und besser die Anzahl der Reflexe kontrollieren.
Bei Google messen wir unsere Seiten und Webanwendungen in vielerlei Hinsicht, und Reflow ist ein Schlüsselfaktor, den wir beim Hinzufügen von UI berücksichtigen. Wir sind bestrebt, lebhafte, interaktive und entzückende Benutzererfahrungen zu vermitteln.
grundsätzlichHier sind einige Prinzipien zur Reduzierung des Reflows:
Im Video unten (Übersetzungsnotiz: Aus YouTube zitiert nicht, kann Lindsey einige Möglichkeiten zur Reduzierung des Reflows vorantreiben, um die Mauer zu reduzieren, um den Originaltext zu durchsuchen).
Weitere Lesen