Die CSSOM- und DOM-Baumstrukturen werden zu einer Rendering-Baumstruktur kombiniert, die dann verwendet wird, um das Layout jedes sichtbaren Elements zu berechnen und als Eingabe für den Malprozess zu dienen, der die Pixel auf dem Bildschirm rendert. Die Optimierung der einzelnen Schritte ist entscheidend, um eine optimale Rendering-Leistung zu erzielen.
Im vorherigen Abschnitt zum Erstellen 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, das andere beschreibt die Stilregeln, die auf das Dokument angewendet werden müssen. Wie führen wir die beiden zusammen, damit der Browser Pixel auf dem Bildschirm rendert?
Zusammenfassung
- Die DOM- und CSSOM-Strukturen bilden zusammen die Rendering-Struktur.
- Die Rendering-Struktur 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 in einer Rendering-Struktur, die den gesamten sichtbaren DOM-Inhalt auf der Seite und alle CSSOM-Stilinformationen für jeden Knoten erfasst.
Der Browser erstellt grob die folgenden Schritte, um die Rendering-Baumstruktur zu erstellen:
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 nicht in der gerenderten Ausgabe widergespiegelt werden.
- Einige Knoten werden über CSS ausgeblendet und auch im Rendering-Baum weggelassen. Im obigen Beispiel fehlt beispielsweise der Span-Knoten in der Rendering-Baumstruktur, 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 Inhalt 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. Sobald der Rendering-Baum vorhanden ist, können wir zur Layoutphase übergehen.
Bis zu diesem Punkt haben wir berechnet, welche Knoten sichtbar sein sollen und welche Stile berechnet werden sollen. Wir haben jedoch nicht ihre genaue Position und Größe innerhalb des Darstellungsbereichs des Geräts berechnet – das 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 am Stamm der Rendering-Baumstruktur und durchläuft sie. 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: Das erste (übergeordnete) div-Element setzt die Anzeigegröße des Knotens auf 50% der Breite des Darstellungsbereichs und das zweite div-Element, das im übergeordneten Element enthalten ist, legt seine Breite auf 50% des übergeordneten Elements fest, d. h. 25% der Breite des Darstellungsbereichs.
Die Ausgabe des Layoutprozesses ist ein „Box-Modell“, 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, sowie die berechneten Stile und Geometrie, können wir diese Informationen an die letzte Phase übergeben. Diese wandelt jeden Knoten im Rendering-Baum in tatsächliche Pixel auf dem Bildschirm um. 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 können jedoch einen Einblick in alle drei oben beschriebenen Phasen geben. Sehen wir uns die Layout-Phase für unser ursprüngliches „Hello World“-Beispiel an:
- Mit dem Ereignis „Layout“ werden die Konstruktion, Position und Größenberechnung der Rendering-Baumstruktur in der Zeitachse erfasst.
- Wenn das Layout fertig ist, gibt der Browser die Ereignisse „Paint-Einrichtung“ und „Paint“ aus, wodurch die Rendering-Baumstruktur in Pixel auf dem Bildschirm konvertiert wird.
Die erforderliche Zeit für die Konstruktion der Baumstruktur, das Layout und das Painting hängt von der Größe des Dokuments, den angewendeten Stilen und dem Gerät ab, 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 „preiswert“ in der Farbe, während ein Schlagschatten „teuer“ in der Berechnung und beim Rendern ist.
Die Seite ist schließlich im Darstellungsbereich sichtbar:
Hier eine kurze Zusammenfassung der Schritte des Browsers:
- HTML-Markup verarbeiten und den DOM-Baum erstellen
- CSS-Markup verarbeiten und die CSSOM-Baumstruktur erstellen
- Kombinieren Sie DOM und CSSOM in einer Rendering-Baumstruktur.
- Führen Sie das Layout in der Rendering-Baumstruktur aus, um die Geometrie jedes Knotens zu berechnen.
- Zeichnen Sie die einzelnen Knoten auf den Bildschirm.
Unsere Demoseite sieht vielleicht einfach aus, ist aber arbeitsaufwendig. Würde das DOM oder CSSOM geändert, müssten Sie den Vorgang wiederholen, um herauszufinden, welche Pixel auf dem Bildschirm neu gerendert werden müssen.
Bei der Optimierung des kritischen Rendering-Pfads wird die Gesamtzeit minimiert, 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 auch die Zeit zwischen Bildschirmaktualisierungen nach dem ersten Rendern verkürzt, d. h. höhere Aktualisierungsraten für interaktive Inhalte erzielen.