Wie parst der Browser eine HTML-Datei?

Der Browser liest die HTML-Datei Byte für Byte. Basierend auf der Codierung der Datei wird ein Zeichenstrom aufgebaut. Dieser Strom wird geparst, wobei Tokens (öffnendes und schließendes Tag, Text, Kommentar, Doctype) gebildet werden. Die Tokens werden in Knoten (nodes) umgewandelt, die in einen Baum (Document Object Model, DOM) verbunden werden.

Der Parsing-Prozess durchläuft folgende Phasen:

Byte-Lesen: Der Browser erhält einen Byte-Stream.
Codierung bestimmen: Die Codierung der Datei wird ermittelt (z.B. UTF-8, Windows-1251). Dies kann über HTTP-Header, <meta>-Tags oder automatische Erkennung erfolgen.
In Zeichen umwandeln: Die Bytes werden entsprechend der ermittelten Codierung in Zeichen umgewandelt.

Tokenisierung: Der Zeichenstrom wird in Tokens zerlegt.

<!-- Beispiel für Tokens -->
<p> // Token: öffnendes Tag "p"
  Hallo, // Token: Text "Hallo, "
  Welt! // Token: Text "Welt!"
</p> // Token: schließendes Tag "p"

AST (DOM-Baum) erstellen: Aus der Token-Sequenz wird ein Baum von Knoten (DOM) aufgebaut. Der Browser hält einen Stack offener Tags; beim Erkennen eines schließenden Tags schließt er das entsprechende offene Tag aus dem Stack und fügt seinen Knoten in den Baum ein.

<!-- Einfache DOM-Struktur für: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Beispiel</title>
  </head>
  <body>
    <p>Text</p>
  </body>
</html>

// Der DOM-Baum wird eine Struktur haben, die die Verschachtelung der Tags widerspiegelt.
// Zum Beispiel wird der Knoten "p" ein Kind des Knotens "body".

Parsing von Skripten und Styles: Während des HTML-Parsings trifft der Browser auf die Tags <script> und <link>/<style>.
- <script>: Standardmäßig wird das HTML-Parsing pausiert, das Skript wird geladen, geparst und ausgeführt. Nach der Ausführung wird das HTML-Parsing fortgesetzt. Die Attribute async und defer ändern dieses Verhalten. async führt das Skript asynchron aus, ohne das Parsing zu blockieren. defer verzögert die Ausführung des Skripts bis zum Abschluss des HTML-Parsings.
- <link> / <style>: CSS wird parallel zum HTML geparst und erstellt das CSS-Objektmodell (CSSOM). Das Vorhandensein von <link> vor <script> kann die Ausführung des Skripts verzögern, da der Browser auf den Aufbau des CSSOM warten kann, um die korrekte Anwendung der Stile vor der Skriptausführung sicherzustellen.