Wie eine Seite gerendert wird: Parsing, DOM, CSSOM, Layout, Paint
Sehen Sie, was der Browser mit den HTML- und CSS-Bytes macht: DOM und CSSOM aufbauen, das Layout berechnen und Pixel zeichnen.
Wie eine Seite gerendert wird: Parsing, DOM, CSSOM, Layout, Paint ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Von Bytes zu Pixeln
Wenn der Browser HTML-Bytes vom Server empfängt, wandelt ein mehrstufiger Prozess sie in die Pixel um, die Sie auf dem Bildschirm sehen. Wenn Sie diese Pipeline kennen, können Sie die Performance optimieren und verstehen, wodurch visuelle Fehler entstehen.
Schritt 1 – HTML parsen: Das DOM aufbauen
Der HTML-Parser des Browsers liest den Bytestrom und erstellt das Document Object Model (DOM) – einen Baum aus Knoten, der jedes HTML-Element, jeden Textknoten und jeden Kommentar im Dokument repräsentiert.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'Schritt 2 – CSS parsen: Das CSSOM aufbauen
Gleichzeitig werden CSS-Bytes in das CSS Object Model (CSSOM) geparst – einen Baum aus Style-Regeln. CSS blockiert das Rendern: Der Browser zeichnet keine Pixel, bevor er die Styles für die sichtbaren Inhalte berechnet hat.
Schritt 3 – Der Render Tree
Der Browser kombiniert DOM und CSSOM zum Render Tree. Nur sichtbare Knoten werden aufgenommen – Elemente mit display:none werden ausgeschlossen. Jeder Knoten im Render Tree enthält den berechneten Style, mit dem er gezeichnet wird.
Schritt 4 – Layout (Reflow)
Layout berechnet mithilfe des Box-Modells und der Viewport-Breite die genaue Position und Größe jedes Knotens im Render Tree. Dieser Vorgang wird auch Reflow genannt. Layout ist aufwendig; vermeiden Sie, es wiederholt in JavaScript auszulösen.
Schritt 5 – Painting
Painting wandelt das Layout in tatsächliche Pixel auf dem Bildschirm um. Der Browser zeichnet Hintergründe, Rahmen, Text und Bilder Ebene für Ebene. Einige Elemente erzeugen eigene Compositing Layers für GPU-beschleunigtes Rendering.
Schritt 6 – Compositing
Der Compositor des Browsers kombiniert die gezeichneten Ebenen zum endgültigen Frame und sendet ihn an den Bildschirm. Wenn Sie für Animationen transform und opacity verwenden, kann der Compositor sie auf der GPU ausführen und Layout sowie Painting vollständig überspringen.
Was blockiert das Rendern?
CSS im <head> blockiert das Rendern. JavaScript blockiert standardmäßig sowohl den Parser als auch das Rendern. Verwenden Sie defer bei Script-Tags, um das JS nach dem HTML zu parsen, ohne das Rendern zu blockieren.
<script src="app.js" defer></script>Critical Rendering Path
Der Critical Rendering Path ist die Abfolge vom Empfang der HTML-Bytes bis zur Anzeige des ersten Pixels. Bei seiner Optimierung geht es darum, Anzahl und Größe der Ressourcen zu minimieren, die das Rendern blockieren, und nicht kritisches JS und CSS verzögert zu laden.
Reflow vs. Repaint
Das Ändern von Layout-Eigenschaften (width, margin, position) löst einen Reflow und ein Repaint aus. Das Ändern rein visueller Eigenschaften (color, background) löst nur ein Repaint aus. Das Ändern von transform oder opacity löst nur Compositing aus. Bevorzugen Sie die günstigste Operation.
DevTools: Die Painting-Timeline anzeigen
Öffnen Sie in den Chrome DevTools das Performance-Panel, zeichnen Sie den Ladevorgang einer Seite auf und untersuchen Sie das Waterfall-Diagramm. Sie sehen die grünen Painting-Events und können feststellen, welche Elemente aufwendige Layout-Berechnungen verursachen.
Kurztest
Welcher Schritt berechnet die genaue Größe und Position jedes Elements auf der Seite?
Zusammenfassung: Die Rendering-Pipeline
HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite. Jeder Schritt liefert die Grundlage für den nächsten. Die Optimierung des Critical Rendering Path bedeutet, diese Pipeline zu verkürzen, damit die ersten sichtbaren Inhalte so schnell wie möglich erscheinen.
Häufig gestellte Fragen
Ist die Lektion „Wie eine Seite gerendert wird: Parsing, DOM, CSSOM, Layout, Paint“ kostenlos?
Ja — der vollständige Text von „Wie eine Seite gerendert wird: Parsing, DOM, CSSOM, Layout, Paint“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Wie eine Seite gerendert wird: Parsing, DOM, CSSOM, Layout, Paint“?
Sehen Sie, was der Browser mit den HTML- und CSS-Bytes macht: DOM und CSSOM aufbauen, das Layout berechnen und Pixel zeichnen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Wie eine Seite gerendert wird: Parsing, DOM, CSSOM, Layout, Paint“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Browser, DNS und HTTP: Der Lebenszyklus einer Anfrage
- HTML, CSS und JavaScript: Die Aufgabe jeder Ebene
- Wie eine Seite gerendert wird: Parsing, DOM, CSSOM, Layout, Paint
- Entwicklertools: DevTools öffnen und verwenden