Wie viele Refflows fügt eine DocumentFragment Ursache an?
Die Verwendung von DocumentFramgment ermöglicht dies um DOM-Elemente miteinander zu verbinden, ohne einen Reflow des Browsers zu verursachen (dh mit Offline-DOM-Bäumen arbeiten). Viele Bibliotheken wie jQuery verwenden Dokumentfragmente, um die Leistung zu verbessern.
Das Dokumentfragment kann eine komplizierte Struktur haben. Nehmen wir zum Beispiel an, dass es etwas wie folgt darstellt:
%Vor%oder ein Dokumentfragment, das mehrere untergeordnete Elemente enthält:
%Vor%Wenn wir das Fragment fertig gebaut haben, hängen wir es oft an den Haupt-DOM-Baum an.
Wie viele Rückflüsse passieren, wenn wir das tun? Kommt es auf die Anzahl der direkten Kinder des Dokumentfragments an?
Aktualisierung:
Ich habe eine Antwort von Addy Osmani erhalten, die im Chrome-Team bei Google ist:
Nur ein DOM-Reflow. PS: Wir bewegen uns mehr in Richtung Reflow als Layout, da es im Grunde ein Ereignis ist, das Layout / Repaint auf der Seite auslöst.
1 Antwort
Ein einzelner DOM-Reflow-Prozess tritt jedes Mal auf, wenn eine Aktion, die einen verursacht, aufgerufen wird. In diesem Artikel können Sie Folgendes lesen:
Mit diesem Muster können wir mehrere Elemente erstellen und in die einfügen DOM löst einen einzelnen Reflow aus. Es benutzt etwas namens a Dokumentfragment. Wir erstellen ein DocumentFragment außerhalb des DOM (so es ist out-of-the-Flow). Wir erstellen und fügen dann mehrere Elemente hinzu Dies. Schließlich verschieben wir alle Elemente in DocumentFragment in das DOM aber triggert einen einzelnen Reflow.
Es gibt verschiedene Aktionen kann einen DOM-Reflow verursachen, einschließlich des Anhängens eines neuen Elements an das Dokument. Der Zweck der Verwendung von DocumentFragment besteht darin, Inhalte in einer einzigen Operation an das DOM anhängen zu können, was einen einzelnen Reflow-Prozess verursacht.
Laut diesem Artikel können wir Folgendes lesen:
Manchmal kann das Umschmelzen eines einzelnen Elements im Dokument erforderlich sein Reflowing seiner Elternelemente und auch Elemente, die ihm folgen.
Alle diese Reflow-Vorgänge werden jedoch in einem einzelnen Reflow-Prozess ausgeführt.
Ich habe eine Geige erstellt, um dies zu demonstrieren. Mit der Zeitleiste von Chrome können wir deutlich sehen, dass das Rendern in einem einzigen Block erfolgt.
Tags und Links javascript html documentfragment reflow