Hoe parseren de browsers een HTML-bestand?

De browser leest het HTML-bestand byte voor byte. Op basis van de codering van het bestand wordt een tekenstroom opgebouwd. Deze stroom wordt geparsed, waarbij tokens (openende en sluitende tag, tekst, commentaar, doctype) worden gevormd. De tokens worden omgezet in knooppunten (nodes), die aan een boom worden gekoppeld: het Document Object Model (DOM).

Het parsingproces doorloopt de volgende fasen:

Lezen van bytes: De browser ontvangt een byte-stroom.
Bepalen van de codering: De codering van het bestand wordt vastgesteld (bijvoorbeeld UTF-8, Windows-1251). Dit kan via HTTP-headers, <meta>-tags of automatische detectie.
Omzetten naar tekens: De bytes worden omgezet in tekens volgens de vastgestelde codering.

Tokenisatie: De tekenstroom wordt opgesplitst in tokens.

<!-- Voorbeeld van tokens -->
<p> // Token: openingstag "p"
  Hallo, // Token: tekst "Hallo, "
  wereld! // Token: tekst "wereld!"
</p> // Token: sluitingstag "p"

Bouwen van de AST (DOM-boom): Op basis van de sequentie van tokens wordt een knooppuntboom (DOM) opgebouwd. De browser houdt een stack van open tags; wanneer een sluitingstag wordt gevonden, sluit hij de overeenkomstige open tag op de stack en voegt hij het knooppunt toe aan de boom.

<!-- Eenvoudige DOM-structuur voor: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Voorbeeld</title>
  </head>
  <body>
    <p>Tekst</p>
  </body>
</html>

// De DOM-boom zal een structuur hebben die de geneste tags weerspiegelt.
// Bijvoorbeeld, het "p"-knooppunt zal een kind zijn van het "body"-knooppunt.

Parsing van scripts en stijlen: Tijdens het parseren van HTML, ontmoet de browser de tags <script> en <link>/<style>.
- <script>: Standaard wordt het HTML-parseren gepauzeerd, wordt het script geladen, geparsed en uitgevoerd. Na uitvoering wordt het HTML-parseren hervat. De attributen async en defer wijzigen dit gedrag. async voert het script asynchroon uit, zonder het parseren te blokkeren. defer stelt uit tot het einde van het HTML-parseren.
- <link> / <style>: CSS wordt parallel met HTML geparsed en creëert het CSS Object Model (CSSOM). De aanwezigheid van <link> vóór <script> kan de uitvoering van het script vertragen, omdat de browser kan wachten op het bouwen van de CSSOM om de juiste toepassing van stijlen te garanderen voordat het script wordt uitgevoerd.