So verwenden Sie Redraw und Reflow

Dieses Mal zeige ich Ihnen, wie Sie Redraw und Reflow verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Redraw und Reflow gelten. Hier ist ein praktischer Fall, schauen wir uns das an.

Prinzip der Browser-Ladeseite

Normalerweise analysiert die Browser-Engine beim ersten Laden des Dokuments das HTML-Dokument, um einen DOM-Baum zu erstellen , und dann basierend auf den geometrischen Eigenschaften von DOM-Elementen einen Baum zum Rendern erstellen. Jeder Knoten des Rendering-Baums verfügt über Attribute wie Größe und Rand, ähnlich dem Box-Modell (da versteckte Elemente nicht angezeigt werden müssen, enthält der Rendering-Baum keine im DOM-Baum versteckten Elemente). Wenn der Rendering-Baum erstellt ist, kann der Browser die Elemente an der richtigen Stelle platzieren und dann die Seite basierend auf den Stilattributen der Rendering-Baum-Knoten zeichnen. Aufgrund des Flusslayouts des Browsers muss die Berechnung des Rendering-Baums normalerweise nur einmal durchlaufen werden. Mit Ausnahme der Tabelle und ihrer internen Elemente sind möglicherweise mehrere Berechnungen erforderlich, um die Attribute ihrer Knoten im Rendering-Baum zu bestimmen, was normalerweise dreimal so lange dauert wie äquivalente Elemente. Dies ist einer der Gründe, warum wir die Verwendung von Tabellen für das Layout vermeiden sollten.

Neuzeichnen

Neuzeichnen ist ein Browserverhalten, das durch eine Änderung im Erscheinungsbild eines Elements ausgelöst wird, beispielsweise durch die Änderung von Attributen wie Sichtbarkeit, Umriss und Hintergrundfarbe. Der Browser zeichnet das Element basierend auf seinen neuen Attributen neu und verleiht dem Element ein neues Aussehen. Das Neuzeichnen führt nicht zu einem Neulayout und geht nicht unbedingt mit einem Reflow einher. Browser zahlen beim Neuzeichnen und Umfließen einen hohen Leistungspreis.

Neuanordnung

Die Neuanordnung ist eine offensichtlichere Änderung, die so verstanden werden kann, dass der Rendering-Baum neu berechnet werden muss. Im Folgenden sind häufige Vorgänge aufgeführt, die einen Reflow auslösen:

1. Geometrieattributänderungen von DOM-Elementen.

2. Strukturänderungen des DOM-Baums.

Zum Beispiel die Zunahme, Abnahme, Bewegung von Knoten usw.

Holen Sie sich einige Attribute.

Beim Abrufen einiger Attribute löst der Browser auch einen Reflow aus, um den richtigen Wert zu erhalten. Dadurch wird die Optimierung des Browsers unwirksam. Zu diesen Eigenschaften gehören: offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getComputedStyle() (currentStyle im IE). Daher sollten diese Werte bei mehrfacher Verwendung zwischengespeichert werden.

Darüber hinaus wird auch das Ändern einiger Elementstile, die Größenänderung des Browserfensters, das Erscheinen von Bildlaufleisten usw. einen Reflow auslösen.

Reduzieren Sie die Anzahl der Neuordnungen und den Auswirkungenbereich der Neuordnung

1 Kombinieren Sie mehrere Vorgänge zum Ändern von Stilattributen in einem Vorgang. Beispiel:

JS:
    var changep = document.getElementById(‘changep’);
    changep.style.color = ‘#093′;
    changep.style.background = ‘#eee';
    changep.style.height = ‘200px';
    可以合并为：
CSS:
    p.changep {
        background: #eee;
        color: #093;
        height: 200px;
    }
JS:
    document.getElementById(‘changep’).className = ‘changep';

2. Setzen Sie das Positionsattribut eines Elements, das mehrmals neu angeordnet werden muss, auf „absolut“ oder „fest“, sodass sich dieses Element außerhalb des Dokumentflusses befindet und seine Änderungen keine Auswirkungen auf andere haben Elemente. Elemente mit animierten Effekten werden beispielsweise am besten auf absolute Positionierung eingestellt.

3. Betreiben Sie den Knoten mehrmals im Speicher und fügen Sie ihn nach Abschluss dem Dokument hinzu. Sie möchten beispielsweise Tabellendaten asynchron abrufen und auf der Seite rendern. Sie können zuerst die Daten abrufen und dann das HTML-Fragment der gesamten Tabelle im Speicher erstellen und es dann auf einmal zum Dokument hinzufügen, anstatt jede Zeile in einer Schleife hinzuzufügen.

4. Da Elemente, deren Anzeigeattribut „none“ ist, nicht im Rendering-Baum enthalten sind, führen Operationen an ausgeblendeten Elementen nicht zur Neuanordnung anderer Elemente. Wenn Sie komplexe Operationen an einem Element ausführen möchten, können Sie es zunächst ausblenden und nach Abschluss der Operation wieder anzeigen. Dadurch werden beim Ein- und Ausblenden nur zwei Reflows ausgelöst.

5. Wenn Sie häufig Attributwerte abrufen müssen, die einen Browser-Reflow verursachen, speichern Sie sie in Variablen.

Ich glaube, Sie beherrschen die Methode, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie auf PHP. Weitere verwandte Artikel finden Sie auf der chinesischen Website!

Empfohlene Lektüre:

S5 ermöglicht eine mehrschichtige Bildschirmanpassung

h5 implementiert das Hochladen mehrerer Bildvorschauen und anklickbare Drag-Steuerelemente

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Redraw und Reflow. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!