Wie verarbeitet der Browser die Webseite?

Der Verarbeitungsprozess einer Webseite durch den Browser kann in mehrere Phasen unterteilt werden:

1. Anfrage und Ressourcengewinnung:

   • Der Benutzer gibt die URL in die Adressleiste ein oder klickt auf einen Link.
   • Der Browser sendet eine HTTP-Anfrage an den Server.
   • Der Server verarbeitet die Anfrage und sendet eine Antwort, die in der Regel ein HTML-Dokument enthält.

2. Syntaxanalyse (Parsing):

   • Der Browser erhält das HTML-Dokument in Form von Bytes.
   • Diese Bytes werden entsprechend der angegebenen Kodierung in Zeichen decodiert.
   • Der HTML-Parser analysiert das Dokument Zeichen für Zeichen und baut den DOM-Baum (Document Object Model) auf. Das DOM stellt die logische Struktur des Dokuments dar.
   • Beim Erkennen von <link>-Tags (für CSS) oder <script>-Tags (für JavaScript) beginnt der Browser, diese Ressourcen parallel zum HTML-Parsing herunterzuladen.

3. Erstellung des CSSOM:

   • Der CSS-Parser analysiert die CSS-Regeln aus <style>-Tags, <link>-Tags und Inline-Stilen.
   • Basierend auf diesen Regeln wird der CSSOM-Baum (CSS Object Model) erstellt, der alle Stile für jedes Element auf der Seite enthält.

4. Erstellung des Render-Baums:

   • Der Render-Baum kombiniert DOM und CSSOM. Er enthält nur die Elemente, die auf der Seite angezeigt werden, und die entsprechenden Stile.
   • Elemente mit der CSS-Regel display: none; werden im Render-Baum nicht berücksichtigt.

5. Layout (Reflow):

   • Der Browser berechnet die genauen geometrischen Maße und Positionen jedes Elements auf der Seite basierend auf dem Render-Baum. Dieser Vorgang wird Layout oder Reflow genannt.
   • Das Layout erfolgt bei der ersten Erstellung des Render-Baums sowie bei Änderungen an der Fenstergröße, beim Hinzufügen oder Entfernen von Elementen oder bei Änderungen an deren Stilen.

6. Painting:

   • Der Browser zeichnet jedes Element auf den Bildschirm unter Verwendung der Informationen aus dem Render-Baum und den Ergebnissen des Layout-Schritts.
   • Das Painting kann auch bei Änderungen an sichtbaren Eigenschaften des Elements erfolgen, wie Farbe, Hintergrund, Transparenz, ohne die Geometrie zu verändern (dies wird Repaint genannt).

7. Komposition:

   • Die darstellbaren Elemente können in verschiedenen Schichten zusammengefasst werden, um das Rendering und die Animation zu optimieren.
   • Diese Schichten werden dann zur Anzeige der endgültigen Seite auf dem Bildschirm zusammengeführt.

8. Ausführung von Skripten:

   • Wenn der HTML-Parser das <script>-Tag erreicht, wird die HTML-Parsing-Ausführung (standardmäßig) pausiert, und der Browser lädt, analysiert und führt den JavaScript-Code aus.
   • JavaScript kann DOM und CSSOM verändern, was zu wiederholten Layout- und Painting-Schritten führen kann.
   • Die Attribute async und defer im <script>-Tag beeinflussen die Reihenfolge und den Zeitpunkt der Skriptausführung, sodass das HTML-Parsing fortgesetzt werden kann.

Hier eine ungefähre Visualisierung des Ablaufs:

HTTP-Anfrage
↓
HTML-Bytes
↓
HTML-Parser
→ CSS-Parser (parallel)
    ↓           ↓
    DOM-Baum  CSSOM-Baum
          ↓
     Render-Baum
          ↓
        Layout
          ↓
       Painting
          ↓
     Komposition
          ↓
   Bildschirmanzeige

Die Ausführung von JavaScript kann an verschiedenen Stellen unterbrochen werden, was zu wiederholten Schritten führt:

HTML-Parser + `<script>`-Tag
↓
HTML-Parsing pausieren
↓
Script herunterladen
↓
Script parsen
↓
Script ausführen
↓
(Kann DOM/CSSOM modifizieren → Trigger Layout/Paint)
↓
HTML-Parsing fortsetzen

Das Verständnis dieses Prozesses ist wichtig, um die Leistung von Webseiten zu optimieren.