Der Rendering-Prozess des Browsers kann in die folgenden Schritte unterteilt werden:
HTML analysieren : Der Browser analysiert das empfangene HTML-Dokument in einen DOM-Baum (Document Object Model). Der DOM-Baum stellt die Struktur eines HTML-Dokuments dar. Jedes HTML-Element wird als Knoten dargestellt und ist durch eine Eltern-Kind-Beziehung verbunden.
Erstellen Sie einen DOM-Baum : Beim Parsen eines HTML-Dokuments erstellt der Browser einen DOM-Baum basierend auf der verschachtelten Beziehung von HTML-Tags. Während dieses Vorgangs analysiert der Browser Tags, Attribute und Textinhalte und konvertiert sie in DOM-Knoten.
CSS analysieren : Der Browser analysiert das CSS-Stylesheet und erstellt einen CSSOM-Baum (CSS Object Model). Der CSSOM-Baum repräsentiert die hierarchische Beziehung und Stildefinition von CSS-Stilen.
Erstellen Sie den Rendering-Baum : Der Browser kombiniert den DOM-Baum und den CSSOM-Baum, um den Rendering-Baum (auch Layout-Baum oder Präsentationsbaum genannt) zu erstellen. Der Renderbaum enthält nur die Elemente, die auf der Seite angezeigt werden müssen, z. B. sichtbare HTML-Elemente und deren Stile.
Layout und Zeichnung : Der Browser führt das Layout (auch Reflow oder Schriftsatz genannt) entsprechend dem Renderbaum durch und bestimmt dabei die Position und Größe jedes Elements auf der Seite. Der Browser zeichnet dann die Elemente im Renderbaum auf den Bildschirm und rendert die endgültige Seite. Der Unterschied zwischen einem DOM-Baum und einem Renderbaum liegt in ihrem Zweck und Inhalt:
DOM-Baum : Der DOM-Baum ist eine abstrakte Darstellung des HTML-Dokuments. Er beschreibt die Struktur des HTML-Dokuments. Jedes HTML-Element wird als Knoten dargestellt. Der DOM-Baum enthält alle Elemente auf der Seite und ihre Beziehungen, einschließlich versteckter Elemente und Elemente, die nicht angezeigt werden müssen (z. B. <head>Inhalte unter Tags).
Rendering-Baum : Der Rendering-Baum ist eine Kombination aus dem DOM-Baum und dem CSSOM-Baum. Er enthält nur die Elemente, die auf der Seite angezeigt werden müssen. Jedes Element im Renderbaum ist mit seinem Stil verknüpft, einschließlich Layout- und Zeichnungsinformationen. Der Rendering-Baum enthält keine Elemente, die nicht angezeigt werden müssen, und keine ausgeblendeten Elemente. Während des Erstellungsprozesses des Rendering-Baums bestimmt der Browser anhand der Beziehung zwischen dem DOM-Baum und dem CSSOM-Baum, welche Knoten auf der Seite angezeigt werden müssen, und berechnet deren geometrische Größe und Position. Der Rendering-Baum dient dazu, die Seite letztendlich zu zeichnen und für den Benutzer sichtbare Inhalte bereitzustellen.