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 unterschiedliche 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.
- Die Rendering-Struktur 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:
Durchlaufen Sie alle sichtbaren Knoten, beginnend am Stamm des DOM-Baums.
- Einige Knoten sind nicht sichtbar (z. B. Skript-Tags, Meta-Tags usw.) und werden ausgelassen, da sie in der gerenderten Ausgabe nicht berücksichtigt werden.
- Einige Knoten werden mithilfe von CSS ausgeblendet und auch aus der Rendering-Struktur ausgelassen. So fehlt beispielsweise der Span-Knoten (im Beispiel oben) in der Rendering-Struktur, weil es eine explizite Regel gibt, die die Eigenschaft "display: none" dafür festlegt.
Suchen Sie für jeden sichtbaren Knoten die passenden CSSOM-Regeln und wenden Sie sie an.
Senden Sie sichtbare Knoten mit Inhalten und ihren berechneten Stilen aus.
Die endgültige Ausgabe ist eine Rendering-Struktur, die sowohl die Inhalte als auch die Stilinformationen aller auf dem Bildschirm sichtbaren Inhalte 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 „Hello World“-Beispiel an:
- Das Ereignis „Layout“ erfasst die Erstellung des Renderbaums, die Position und die Größe in der Zeitachse.
- Wenn das Layout fertiggestellt ist, gibt der Browser die Ereignisse "Paint Setup" und "Paint" aus, die die Rendering-Struktur in Pixel auf dem Bildschirm konvertieren.
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 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.
- Kombinieren Sie DOM und CSSOM in einer Rendering-Struktur.
- Führen Sie das Layout für den Rendering-Baum aus, um die Geometrie der einzelnen Knoten zu berechnen.
- Einzelne Knoten auf den Bildschirm übertragen
Die Demoseite mag einfach erscheinen, erfordert aber einiges an Arbeit für den Browser. 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 die Gesamtzeit minimiert, die für die Ausführung der Schritte 1 bis 5 in der obigen Sequenz aufgewendet wird. 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.