Veröffentlicht: 31. März 2014
Die CSSOM- und DOM-Bäume werden zu einem Renderbaum kombiniert, der dann verwendet wird, um das Layout jedes sichtbaren Elements zu berechnen. Er dient als Eingabe für den Paint-Prozess, bei dem die Pixel auf dem Bildschirm gerendert werden. Die Optimierung jedes dieser Schritte ist entscheidend, um eine optimale Renderingleistung zu erzielen.
Im vorherigen Abschnitt zum Erstellen des Objektmodells haben wir die DOM- und CSSOM-Bäume anhand der HTML- und CSS-Eingabe erstellt. Beide sind jedoch unabhängige Objekte, die verschiedene Aspekte des Dokuments erfassen: Eines beschreibt den Inhalt und das andere die Stilregeln, die auf das Dokument angewendet werden müssen. Wie können wir die beiden zusammenführen und den Browser dazu bringen, Pixel auf dem Bildschirm zu rendern?
Zusammenfassung
- Die DOM- und CSSOM-Bäume werden kombiniert, um den Renderbaum zu bilden.
- Der Renderbaum enthält nur die Knoten, die zum Rendern der Seite erforderlich sind.
- Im Layout werden die genaue Position und Größe jedes Objekts berechnet.
- Der letzte Schritt ist das Malen, bei dem der endgültige Renderbaum übernommen 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 erfasst.
Um den Renderbaum zu erstellen, führt der Browser ungefähr die folgenden Schritte aus:
Gehen Sie vom Stamm des DOM-Baums aus und durchlaufen Sie jeden sichtbaren Knoten.
- Einige Knoten sind nicht sichtbar (z. B. Script-Tags, Meta-Tags usw.) und werden daher weggelassen, da sie nicht in der gerenderten Ausgabe berücksichtigt werden.
- Einige Knoten werden mit CSS ausgeblendet und auch aus dem Renderbaum entfernt. Im Beispiel oben fehlt beispielsweise der Span-Knoten im Renderbaum, weil wir eine explizite Regel haben, die die Property „display: none“ darauf festlegt.
Suchen Sie für jeden sichtbaren Knoten die entsprechenden CSSOM-Regeln und wenden Sie sie an.
Senden Sie sichtbare Knoten mit Inhalten und ihren berechneten Stilen aus.
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 vorhanden ist, können wir mit der Phase „Layout“ fortfahren.
Bislang haben wir berechnet, welche Knoten sichtbar sein sollen, und ihre berechneten Stile. Wir haben jedoch nicht ihre genaue Position und Größe im Darstellungsbereich des Geräts berechnet. Das ist die Layoutphase, auch als „Neuanpassung“ 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> des vorherigen Beispiels enthält zwei verschachtelte <div>s: Das erste (übergeordnete) <div> legt die Darstellungsgröße des Knotens auf 50% der Darstellungsfensterbreite fest. Das zweite <div>, das sich im übergeordneten Element befindet, legt sein width auf 50% des übergeordneten Elements fest, also 25% der Darstellungsfensterbreite.
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.
Da wir nun wissen, welche Knoten sichtbar sind, und ihre berechneten Stile und Geometrien, können wir diese Informationen an die letzte Phase übergeben, in der jeder Knoten im Renderbaum in tatsächliche Pixel auf dem Bildschirm umgewandelt wird. Dieser Schritt wird oft als „Painting“ oder „Rasterung“ bezeichnet.
Das kann einige Zeit dauern, da der Browser viel Arbeit zu erledigen hat. Die Chrome-Entwicklertools können jedoch einen Einblick in alle drei zuvor beschriebenen Phasen bieten. Sehen wir uns die Layoutphase für unser ursprüngliches „Hallo Welt“-Beispiel an:
- Das Ereignis „Layout“ erfasst die Erstellung des Renderbaums, die Position und die Größe in der Zeitachse.
- Wenn das Layout fertig ist, sendet der Browser die Ereignisse „Paint Setup“ und „Paint“, die den Renderbaum in Pixel auf dem Bildschirm umwandeln.
Die Zeit, die für die Erstellung des Renderbaums, das Layout und das Malen 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 für das Malen benötigt. Beispielsweise ist das Malen einer durchgehenden Farbe „billig“, während das Berechnen und Rendern eines Schattens „teuer“ ist.
Die Seite ist jetzt 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
- Kombinieren Sie das DOM und das CSSOM zu einem Renderbaum.
- Führen Sie das Layout für den Rendering-Baum aus, um die Geometrie der einzelnen Knoten zu berechnen.
- Zeichnen Sie die einzelnen Knoten auf dem Bildschirm.
Die Demoseite mag einfach erscheinen, erfordert aber einiges an Arbeit seitens des Browsers. Wenn das DOM oder CSSOM geändert wurde, müssen Sie den Vorgang wiederholen, um herauszufinden, welche Pixel neu gerendert werden müssen.
Bei der Optimierung des kritischen Rendering-Pfads wird der Gesamtaufwand für die Ausführung der Schritte 1 bis 5 in der obigen Abfolge minimiert. Dadurch werden Inhalte so schnell wie möglich auf dem Bildschirm gerendert und die Zeit zwischen den Bildschirmaktualisierungen nach dem ersten Rendern wird verkürzt. Das bedeutet, dass höhere Bildwiederholraten für interaktive Inhalte erreicht werden.