Beispiele für das Neuzeichnen und Neuanordnen von CSS

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zu CSS-Neuzeichnungs- und Reflow-Methoden vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen, in der Hoffnung, allen zu helfen.

Prinzip des Browser-Ladens von Seiten

Normalerweise analysiert die Browser-Engine beim ersten Laden des Dokuments das HTML-Dokument, um einen DOM-Baum zu erstellen, und baut ihn dann darauf auf zu den geometrischen Attributen der DOM-Elemente Ein Baum zum Rendern. Jeder Knoten des Rendering-Baums verfügt über Attribute wie Größe und Rand, ähnlich dem Box-Modell (da ausgeblendete Elemente nicht angezeigt werden müssen, enthält der Rendering-Baum keine ausgeblendeten Elemente im DOM-Baum). 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 dieses Element außerhalb der Position liegt Der Dokumentenfluss und seine Änderungen wirken sich nicht auf andere Elemente aus. 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 diese in Variablen zwischen.

Verwandte Empfehlungen:

Seiten-Reflow Optimierungsmethoden für Zeichnen und Reflow

Hochleistungsfähiges Rendern, Neuzeichnen und Reflow von WEB-Entwicklungsseiten.

js generiert Miniaturansichten, lädt sie hoch und verwendet Canvas, um_Javascript-Fähigkeiten neu zu zeichnen

Das obige ist der detaillierte Inhalt vonBeispiele für das Neuzeichnen und Neuanordnen von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!