Konstruktion, Layout und Paint von Rendering-Baumstrukturen

Ilya Grigorik
Ilya Grigorik
X Startseite

Veröffentlicht am 31. März 2014

Die CSSOM- und DOM-Strukturen werden zu einer Renderstruktur kombiniert. Diese wird dann verwendet, um das Layout der einzelnen sichtbaren Elemente zu berechnen. Außerdem dient sie als Eingabe für den Malvorgang, bei dem die Pixel auf dem Bildschirm gerendert werden. Die Optimierung der einzelnen Schritte ist entscheidend für eine optimale Rendering-Leistung.

Im vorherigen Abschnitt zum Erstellen des Objektmodells haben wir die DOM- und CSSOM-Strukturen 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 werden die beiden zusammengeführt und wie bringt man den Browser dazu, Pixel auf dem Bildschirm zu rendern?

Zusammenfassung

  • Die DOM- und CSSOM-Strukturen werden zu einer Renderstruktur kombiniert.
  • Die Renderstruktur enthält nur die Knoten, die zum Rendern der Seite erforderlich sind.
  • Beim Layout wird die genaue Position und Größe der einzelnen Objekte berechnet.
  • Der letzte Schritt ist das Malen. Dabei wird die endgültige Renderstruktur verwendet und die Pixel werden auf dem Bildschirm gerendert.

Zuerst kombiniert der Browser das DOM und das CSSOM zu einer Renderstruktur, die alle sichtbaren DOM-Inhalte auf der Seite und alle CSSOM-Stilinformationen für die einzelnen Knoten erfasst.

DOM und CSSOM werden kombiniert, um den Rendertree zu erstellen.

So erstellt der Browser die Renderstruktur:

  1. Beginnend mit dem Stamm des DOM-Baums werden alle sichtbaren Knoten durchlaufen.

    • Einige Knoten sind nicht sichtbar (z. B. Skript-Tags und Meta-Tags) und werden ausgelassen, da sie nicht in der gerenderten Ausgabe enthalten sind.
    • Einige Knoten werden mit CSS ausgeblendet und ebenfalls aus der Renderstruktur entfernt. Der Knoten „span“ im obigen Beispiel fehlt beispielsweise in der Renderstruktur, weil wir eine explizite Regel haben, mit der die Eigenschaft „display: none“ festgelegt wird.

  2. Für jeden sichtbaren Knoten werden die entsprechenden CSSOM-Regeln gesucht und angewendet.

  3. Sichtbare Knoten mit Inhalt und den berechneten Stilen werden ausgegeben.

Die endgültige Ausgabe ist eine Renderstruktur, die sowohl die Inhalts- als auch die Stilinformationen aller sichtbaren Inhalte auf dem Bildschirm enthält. Nachdem die Renderstruktur erstellt wurde, können wir mit der Layoutphase fortfahren.

Bis zu diesem Punkt haben wir berechnet, welche Knoten sichtbar sein sollen und welche Stile auf sie angewendet werden, aber wir haben noch nicht ihre genaue Position und Größe im Darstellungsbereich des Geräts berechnet. Das ist die Layoutphase, die auch als „Reflow“ bezeichnet wird.

Um die genaue Größe und Position der einzelnen Objekte auf der Seite zu ermitteln, beginnt der Browser mit dem Stammknoten der Renderstruktur und durchläuft sie. 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>

Sehen Sie sich dieses HTML-Beispiel an, das als Webseite gerendert wurde.

Der <body> des vorherigen Beispiels enthält zwei verschachtelte <div>. Mit dem ersten (übergeordneten) <div> wird die Anzeigegröße des Knotens auf 50% der Darstellungsbereichsbreite festgelegt. Mit dem zweiten <div>, das im übergeordneten Element enthalten ist, wird die width auf 50% des übergeordneten Elements festgelegt, also auf 25% der Darstellungsbereichsbreite.

Berechnung der Layoutinformationen auf Grundlage der vorherigen Beschreibung.

Die Ausgabe des Layoutprozesses ist ein Boxmodell, das die genaue Position und Größe der einzelnen Elemente 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 Stile und Geometrien auf sie angewendet werden, können wir diese Informationen an die letzte Phase weitergeben. Dabei wird jeder Knoten in der Renderstruktur in tatsächliche Pixel auf dem Bildschirm umgewandelt. Dieser Schritt wird oft als „Malen“ oder „Rastern“ bezeichnet.

Das kann einige Zeit dauern, da der Browser viel Arbeit hat. Mit den Chrome-Entwicklertools erhalten Sie jedoch Einblicke in alle drei oben beschriebenen Phasen. Sehen Sie sich die Layoutphase für unser ursprüngliches „Hello World“-Beispiel an:

Layout in den Entwicklertools messen

  • Das Ereignis „Layout“ erfasst die Erstellung der Renderstruktur sowie die Berechnung von Position und Größe in der Zeitachse.
  • Wenn das Layout abgeschlossen ist, gibt der Browser die Ereignisse „Paint Setup“ und „Paint“ aus, mit denen die Renderstruktur in Pixel auf dem Bildschirm umgewandelt wird.

Die Zeit, die für die Erstellung der Renderstruktur, 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 auch für das Malen benötigt. Eine einfarbige Fläche ist beispielsweise „günstig“ zu malen, während ein Schlagschatten „teuer“ zu berechnen und zu rendern ist.

Die Seite ist jetzt im Darstellungsbereich sichtbar:

Gerenderte Seite mit dem Text „Hallo Web-Performance-Studenten!“ und einem Meme eines süßen Hundes, der sagt, dass Sie großartig sind.

Hier eine kurze Zusammenfassung der Schritte des Browsers:

  1. HTML-Markup verarbeiten und DOM-Baum erstellen.
  2. CSS-Markup verarbeiten und CSSOM-Struktur erstellen.
  3. DOM und CSSOM zu einer Renderstruktur kombinieren.
  4. Layout für die Renderstruktur ausführen, um die Geometrie der einzelnen Knoten zu berechnen.
  5. Die einzelnen Knoten auf dem Bildschirm malen.

Die Demoseite mag einfach aussehen, aber sie erfordert einiges an Arbeit vom Browser. Wenn das DOM oder das CSSOM geändert wird, müssen 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 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 den Bildschirmaktualisierungen nach dem ersten Rendern wird verkürzt. Das bedeutet, dass für interaktive Inhalte höhere Aktualisierungsraten erreicht werden.