Ako prehliadač analyzuje HTML súbor?

Prehliadač číta HTML súbor po bajte. Na základe kódovania súboru sa vytvára tok znakov. Tento tok sa analyzuje, tvoriac tokeny (otvárací a zatvárací tag, text, komentár, doctype). Tokeny sa prevádzajú na uzly (nodes), ktoré sa viažu do stromu — Document Object Model (DOM).

Proces analýzy prebieha v týchto krokoch:

Čítanie bajtov: Prehliadač dostáva tok bajtov.
Určenie kódovania: Určí sa kódovanie súboru (napríklad UTF-8, Windows-1251). To môže prebiehať cez HTTP hlavičky, <meta> tagy alebo sa určuje automaticky.
Prevod na znaky: Bajty sa prevádzajú na znaky v súlade s určeným kódovaním.

Tokenizácia: Tok znakov sa rozdeľuje na tokeny.

<!-- Príklad tokenov -->
<p> // Token: otvárací tag "p"
  Ahoj, // Token: text "Ahoj, "
  svet! // Token: text "svet!"
</p> // Token: zatvárací tag "p"

Vytváranie AST (strom DOM): Na základe sekvencie tokenov sa vytvára strom uzlov (DOM). Prehliadač udržiava zásobník otvorených tagov; keď narazí na zatvárací tag, zatvorí zodpovedajúci otvorený tag zo zásobníka a pridá jeho uzol do stromu.

<!-- Jednoduchá štruktúra DOM pre: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Príklad</title>
  </head>
  <body>
    <p>Text</p>
  </body>
</html>

// Strom DOM bude mať štruktúru odrážajúcu vnorenie tagov.
// Napríklad uzol "p" bude potomkom uzla "body".

Parsovanie skriptov a štýlov: Počas analýzy HTML prehliadač narazí na tagy <script> a <link>/<style>.
- <script>: Predvolene sa analýza HTML pozastaví, skript sa načíta, analyzuje a vykoná. Po vykonaní sa analýza HTML obnoví. Atribúty async a defer menia toto správanie. async vykonáva skript asynchrónne, neblokujúc analýzu. defer odkladá vykonanie skriptu do ukončenia analýzy HTML.
- <link> / <style>: CSS sa analyzuje paralelne s HTML a vytvára CSS Object Model (CSSOM). Prítomnosť <link> pred <script> môže zdržať vykonanie skriptu, pretože prehliadač môže čakať na vytvorenie CSSOM, aby zabezpečil správne použitie štýlov pred vykonaním skriptu.