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. Jede dieser Funktionen optimieren Schritte sind entscheidend für eine optimale Rendering-Leistung.
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: beschreibt den Inhalt und die andere beschreibt die Stilregeln, auf das Dokument angewendet. Wie führen wir die beiden zusammen, um den Browser dazu zu bringen, Pixel auf dem Bildschirm?
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.
Zur Erstellung der Rendering-Struktur geht der Browser in etwa wie folgt vor:
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 passenden CSSOM-Regeln und wenden Sie sie an.
Gibt sichtbare Knoten mit Inhalten und den zugehörigen 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 welche Stile und Geometrie berechnet werden, können wir diese Informationen an die letzte Phase übergeben, die jeden Knoten in der Rendering-Struktur in tatsächliche Pixel auf dem Bildschirm umwandelt. Dieser Schritt wird oft als „Painting“ oder „Rasterung“ bezeichnet.
Dies kann einige Zeit in Anspruch nehmen, da der Browser sehr aufwendig ist. Allerdings können die Chrome-Entwicklertools Ihnen Einblicke in alle drei oben 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, gibt der Browser die Option „Paint-Einrichtung“ aus. und „Paint“. , 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 jetzt im Darstellungsbereich sichtbar:
Hier ist eine kurze Zusammenfassung der Schritte im Browser:
- HTML-Markup verarbeiten und die DOM-Baumstruktur 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.
- Zeichnen Sie die einzelnen Knoten auf dem Bildschirm.
Die Demoseite mag einfach erscheinen, erfordert aber eine Menge Arbeit aufseiten 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 die Gesamtzeit minimiert, die für die Ausführung der Schritte 1 bis 5 in der obigen Abfolge aufgewendet wird. Dadurch werden Inhalte so schnell wie möglich auf dem Bildschirm gerendert und außerdem die Zeit zwischen Bildschirmupdates nach dem ersten Rendern verkürzt. d. h. höhere Aktualisierungsraten für interaktive Inhalte.