Veröffentlicht am 31. März 2014
Die CSSOM- und DOM-Bäume werden zu einem Renderbaum kombiniert, der dann verwendet wird, um das Layout der einzelnen sichtbaren Elemente zu berechnen. Er dient als Eingabe für den Malprozess, bei dem die Pixel auf dem Bildschirm gerendert werden. Die Optimierung jedes dieser Schritte ist entscheidend für eine optimale Rendering-Leistung.
Im vorherigen Abschnitt zum Erstellen des Objektmodells haben wir die DOM- und CSSOM-Bäume auf Grundlage der HTML- und CSS-Eingabe erstellt. Beide sind jedoch unabhängige Objekte, die unterschiedliche Aspekte des Dokuments erfassen: Das eine beschreibt den Inhalt und das andere die Stilregeln, die auf das Dokument angewendet werden müssen. Wie führen wir die beiden zusammen und sorgen dafür, dass der Browser Pixel auf dem Bildschirm rendert?
Zusammenfassung
- Die DOM- und CSSOM-Bäume werden zum Rendern des Baums zusammengeführt.
- Der Renderbaum enthält nur die Knoten, die zum Rendern der Seite erforderlich sind.
- Im Layout wird die genaue Position und Größe jedes Objekts berechnet.
- Der letzte Schritt ist das Rendern, bei dem der endgültige Renderbaum verwendet und die Pixel auf dem Bildschirm gerendert werden.
Zuerst kombiniert der Browser das DOM und das CSSOM zu einem „Renderbaum“, der alle sichtbaren DOM-Inhalte auf der Seite und alle CSSOM-Stilinformationen für jeden Knoten enthält.
So erstellt der Browser den Rendertree:
Beginnen Sie am Stamm des DOM-Baums und durchlaufen Sie jeden sichtbaren Knoten.
- Einige Knoten sind nicht sichtbar, z. B. Script-Tags und Meta-Tags. Sie werden ausgelassen, da sie nicht in der gerenderten Ausgabe enthalten sind.
- Einige Knoten werden mit CSS ausgeblendet und auch aus dem Renderbaum entfernt. Der Span-Knoten im obigen Beispiel fehlt im Renderbaum, weil wir eine explizite Regel haben, die die Eigenschaft „display: none“ für ihn festlegt.
Suchen Sie für jeden sichtbaren Knoten die entsprechenden CSSOM-Regeln und wenden Sie sie an.
Sichtbare Knoten mit Inhalt und den berechneten Stilen ausgeben.
Die endgültige Ausgabe ist ein Renderbaum, der sowohl die Inhalts- als auch die Stilinformationen aller sichtbaren Inhalte auf dem Bildschirm enthält. Nachdem der Renderbaum erstellt wurde, können wir mit der Layoutphase fortfahren.
Bis zu diesem Punkt haben wir berechnet, welche Knoten sichtbar sein sollen, und ihre berechneten Stile, aber wir haben ihre genaue Position und Größe im Viewport des Geräts noch nicht berechnet. Das ist die Layoutphase, auch als „Reflow“ bezeichnet.
Um die genaue Größe und Position jedes Objekts auf der Seite zu ermitteln, beginnt der Browser am Stamm des Renderbaums und durchläuft ihn. Betrachten Sie dieses Beispiel:
<!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>
Das <body> aus dem vorherigen Beispiel enthält zwei verschachtelte <div>s: Das erste (übergeordnete) <div> legt die Anzeigegröße des Knotens auf 50% der Breite des Darstellungsbereichs fest. Das zweite <div>, das im übergeordneten <div> enthalten ist, legt die width auf 50% des übergeordneten Elements fest, also auf 25% der Breite des Darstellungsbereichs.
Die Ausgabe des Layoutprozesses ist ein „Box-Modell“, das die genaue Position und Größe jedes Elements im Darstellungsbereich erfasst: Alle relativen Maße werden in absolute Pixel auf dem Bildschirm umgewandelt.
Nachdem wir nun wissen, welche Knoten sichtbar sind und welche berechneten Stile und Geometrien sie haben, können wir diese Informationen an die letzte Phase weitergeben, in der jeder Knoten im Renderbaum in tatsächliche Pixel auf dem Bildschirm umgewandelt wird. Dieser Schritt wird oft als „Rendern“ oder „Rastern“ bezeichnet.
Das kann einige Zeit dauern, da der Browser viel Arbeit leisten muss. Die Chrome-Entwicklertools können jedoch Einblicke in alle drei oben beschriebenen Phasen geben. Sehen wir uns die Layoutphase für unser ursprüngliches „Hello World“-Beispiel an:
- Das Ereignis „Layout“ erfasst die Erstellung des Renderbaums sowie die Berechnung von Position und Größe auf der Zeitachse.
- Wenn das Layout abgeschlossen ist, gibt der Browser die Ereignisse „Paint Setup“ und „Paint“ aus, die den Renderbaum in Pixel auf dem Bildschirm umwandeln.
Die Zeit, die für das Erstellen des Renderbaums, das Layout und das Rendern benötigt wird, 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, desto mehr Zeit wird auch für das Rendern benötigt. Eine einfarbige Fläche ist beispielsweise „günstig“ zu rendern, während ein Schlagschatten „teuer“ zu berechnen und zu rendern ist.
Die Seite ist nun im Darstellungsbereich sichtbar:
Hier eine kurze Zusammenfassung der Schritte im Browser:
- HTML-Markup verarbeiten und den DOM-Baum erstellen.
- CSS-Markup verarbeiten und den CSSOM-Baum erstellen.
- DOM und CSSOM zu einem Renderbaum kombinieren
- Führen Sie das Layout für den Renderbaum aus, um die Geometrie der einzelnen Knoten zu berechnen.
- Stellen Sie die einzelnen Knoten auf dem Bildschirm dar.
Die Demoseite mag einfach aussehen, aber sie erfordert einiges vom Browser. Wenn das DOM oder das CSSOM geändert wurde, müssten Sie den Vorgang wiederholen, um herauszufinden, welche Pixel auf dem Bildschirm neu gerendert werden müssen.
Beim Optimieren des wichtigen Rendering-Pfads wird die Gesamtzeit minimiert, die für die Schritte 1 bis 5 in der obigen Reihenfolge benötigt wird. Dadurch werden Inhalte so schnell wie möglich auf dem Bildschirm gerendert und die Zeit zwischen Bildschirmaktualisierungen nach dem ersten Rendern wird verkürzt. Das bedeutet, dass für interaktive Inhalte höhere Aktualisierungsraten erreicht werden.