Jak prohlížeč parsuje HTML soubor?

Prohlížeč čte HTML soubor po bytech. Na základě kódování souboru je vytvořen proud znaků. Tento proud je analyzován, čímž vznikají tokeny (otevírací a zavírací tag, text, komentář, doctype). Tokeny jsou převedeny na uzly (nodes), které jsou spojeny do stromu: Document Object Model (DOM).

Proces parsování prochází následujícími etapami:

Čtení bytů: Prohlížeč přijímá proud bytů.
Určení kódování: Určí se kódování souboru (například UTF-8, Windows-1251). To může být provedeno přes HTTP hlavičky, <meta> tagy nebo automatickou detekcí.
Převod na znaky: Byty jsou převedeny na znaky podle určeného kódování.

Tokenizace: Proud znaků je rozdělen na tokeny.

<!-- Příklad tokenů -->
<p> // Token: otevírací tag "p"
  Ahoj, // Token: text "Ahoj, "
  svět! // Token: text "svět!"
</p> // Token: zavírací tag "p"

Vytvoření AST (strom DOM): Na základě sekvence tokenů je vytvořen strom uzlů (DOM). Prohlížeč udržuje zásobník otevřených tagů; při nalezení zavíracího tagu uzavře odpovídající otevřený tag ze zásobníku a přidá jeho uzel do stromu.

<!-- Jednoduchá struktura DOM například: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Příklad</title>
  </head>
  <body>
    <p>Text</p>
  </body>
</html>

// Strom DOM bude mít strukturu odrážející vnoření tagů.
// Například, uzel "p" bude potomkem uzlu "body".

Analýza skriptů a stylů: Během analýzy HTML prohlížeč narazí na tagy <script> a <link>/<style>.
- <script>: Výchozí chování je, že se parsing HTML pozastaví, skript se načte, analyzuje a vykoná. Po vykonání se parsing HTML obnoví. Atributy async a defer toto chování mění. async spouští skript asynchronně, nezablokuje parsing. defer odkládá vykonání skriptu do dokončení parsing HTML.
- <link> / <style>: CSS se analyzuje paralelně s HTML a vytváří CSS Object Model (CSSOM). Přítomnost <link> před <script> může zpozdit vykonání skriptu, protože prohlížeč může čekat na sestavení CSSOM, aby zajistil správné použití stylů před vykonáním skriptu.