Die CSSOM- und DOM-Baumstrukturen werden zu einer Rendering-Struktur kombiniert, die dann verwendet wird, um das Layout jedes sichtbaren Elements zu berechnen und als Eingabe für den Malvorgang zu dienen, mit dem die Pixel auf dem Bildschirm gerendert werden. Die Optimierung dieser Schritte ist für eine optimale Rendering-Leistung von entscheidender Bedeutung.
Im vorherigen Abschnitt zur Erstellung des Objektmodells haben wir die DOM- und CSSOM-Bäume basierend auf der HTML- und CSS-Eingabe erstellt. Beide sind jedoch unabhängige Objekte, die verschiedene Aspekte des Dokuments erfassen. Das eine beschreibt den Inhalt und das andere die Stilregeln, die auf das Dokument angewendet werden müssen. Wie können wir die beiden verbinden, damit der Browser Pixel auf dem Bildschirm rendert?
Zusammenfassung
- Die DOM- und CSSOM-Strukturen bilden zusammen die Rendering-Struktur.
- Die Rendering-Baumstruktur enthält nur die Knoten, die zum Rendern der Seite erforderlich sind.
- Das Layout berechnet die genaue Position und Größe jedes Objekts.
- Der letzte Schritt ist das Painting. Dabei wird die endgültige Rendering-Struktur übernommen und die Pixel auf dem Bildschirm gerendert.
Zuerst kombiniert der Browser das DOM und CSSOM zu einer Rendering-Struktur, die den gesamten sichtbaren DOM-Inhalt auf der Seite und alle CSSOM-Stilinformationen für jeden Knoten erfasst.
Zum Erstellen der Rendering-Baumstruktur geht der Browser grob wie folgt vor:
Gehen Sie vom Stamm des DOM-Baums aus jeden sichtbaren Knoten durch.
- Einige Knoten sind nicht sichtbar (z. B. Skript-Tags oder Meta-Tags) und werden ausgelassen, da sie in der gerenderten Ausgabe nicht berücksichtigt werden.
- Einige Knoten werden über CSS ausgeblendet und auch im Rendering-Baum weggelassen. Im obigen Beispiel fehlt beispielsweise der Span-Knoten in der Rendering-Struktur, da wir eine explizite Regel haben, die die Eigenschaft "display: none" festlegt.
Suchen Sie für jeden sichtbaren Knoten die passenden CSSOM-Regeln und wenden Sie sie an.
Gibt sichtbare Knoten mit Inhalten und ihren berechneten Stilen aus.
Die endgültige Ausgabe ist eine Rendering-Struktur, die sowohl die Inhalts- als auch die Stilinformationen aller auf dem Bildschirm sichtbaren Inhalte enthält. Nachdem der Rendering-Baum eingerichtet ist, können wir mit dem Layout fortfahren.
Bis zu diesem Punkt haben wir berechnet, welche Knoten sichtbar sein sollten und welche Stile berechnet werden sollen. Wir haben jedoch nicht ihre genaue Position und Größe innerhalb des Darstellungsbereichs des Geräts berechnet – dies ist die Layoutphase, die auch als "Reflow" bezeichnet wird.
Um die genaue Größe und Position jedes Objekts auf der Seite zu ermitteln, beginnt der Browser beim Stamm der Rendering-Struktur und durchläuft diese. Sehen wir uns ein einfaches, praktisches Beispiel an:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
Der Text der Seite oben enthält zwei verschachtelte div-Elemente: Mit dem ersten (übergeordneten) div-Element wird die Anzeigegröße des Knotens auf 50% der Breite des Darstellungsbereichs festgelegt. Das zweite div-Element, das im übergeordneten Element enthalten ist, legt seine Breite auf 50% des übergeordneten Elements fest, also 25% der Breite des Darstellungsbereichs.
Das Ergebnis des Layoutprozesses ist ein „Boxmodell“, das die genaue Position und Größe jedes Elements innerhalb des Darstellungsbereichs genau erfasst. Alle relativen Maße werden auf dem Bildschirm in absolute Pixel umgewandelt.
Da wir nun wissen, welche Knoten sichtbar sind und welche berechneten Stile und Geometrie wir haben, können wir diese Informationen an die letzte Phase übergeben, in der jeder Knoten im Rendering-Baum in tatsächliche Pixel auf dem Bildschirm konvertiert wird. Dieser Schritt wird oft als "Malen" oder "Rastern" bezeichnet.
Dies kann einige Zeit in Anspruch nehmen, da der Browser ziemlich aufwendig ist. Die Chrome-Entwicklertools bieten jedoch Informationen zu allen drei oben beschriebenen Phasen. Sehen wir uns die Layout-Phase für unser ursprüngliches „Hello World“-Beispiel an:
- Das Ereignis "Layout" erfasst die Konstruktion der Rendering-Baumstruktur, die Position und die Größenberechnung in der Zeitachse.
- Wenn das Layout fertig ist, gibt der Browser die Ereignisse „Farbeinrichtung“ und „Paint“ aus, wodurch die Rendering-Struktur in Pixel auf dem Bildschirm konvertiert wird.
Die für die Konstruktion der Rendering-Baumstruktur, das Layout und das Zeichnen benötigte Zeit variiert je nach Größe des Dokuments, den angewendeten Stilen und dem Gerät, auf dem es ausgeführt wird: Je größer das Dokument, desto mehr Arbeit hat der Browser, je komplizierter die Stile sind, desto länger dauert auch das Malen (z. B. ist eine Volltonfarbe günstig, während ein Schlagschatten „teuer“ für Berechnung und Rendering ist.
Die Seite ist nun im Darstellungsbereich sichtbar:
Hier eine kurze Zusammenfassung der Schritte des Browsers:
- HTML-Markup verarbeiten und die DOM-Baumstruktur erstellen
- CSS-Markup verarbeiten und die CSSOM-Baumstruktur erstellen
- Kombinieren Sie DOM und CSSOM zu einer Rendering-Struktur.
- Layout in der Rendering-Baumstruktur ausführen, um die Geometrie jedes Knotens zu berechnen
- Zeichnen Sie die einzelnen Knoten auf den Bildschirm.
Unsere Demoseite sieht zwar einfach aus, ist aber etwas aufwendig. Wenn entweder das DOM oder das CSSOM geändert wird, müssen Sie den Vorgang wiederholen, um herauszufinden, welche Pixel noch einmal auf dem Bildschirm gerendert werden müssen.
Die Optimierung des kritischen Rendering-Pfads ist der Prozess, bei dem die Gesamtzeit minimiert wird, die für die Ausführung der Schritte 1 bis 5 in der obigen Sequenz aufgewendet wird. Auf diese Weise werden Inhalte so schnell wie möglich auf dem Bildschirm gerendert und außerdem die Zeitspanne zwischen den Bildschirmaktualisierungen nach dem ersten Rendering verkürzt, d. h., höhere Aktualisierungsraten für interaktive Inhalte werden erzielt.