Kaip naršyklė analizuoja HTML failą?

Naršyklė skaito HTML failą baitas po baito. Remiantis failo kodavimu, kuriamas simbolių srautas. Šis srautas yra analizuojamas, formuojant žetonus (atveriantis ir uždarantis žymę, tekstą, komentarą, doctype). Žetonai paverčiami mazgais (nodes), kurie sujungiami į medį — Document Object Model (DOM).

Analizės procesas vyksta šiais etapais:

Baitų skaitymas: Naršyklė gauna baitų srautą.
Koduotės nustatymas: Nustatoma failo koduotė (pvz., UTF-8, Windows-1251). Tai gali būti daroma per HTTP antraštes, <meta> žymes arba automatiškai.
Simbolių paversti: Baitai paverčiami simboliais pagal nustatytą koduotę.

Žetonizacija: Simbolių srautas yra padalijamas į žetonus.

<!-- Žetonų pavyzdys -->
<p> // Žetonas: atverianti žymė "p"
  Sveiki, // Žetonas: tekstas "Sveiki, "
  pasauli! // Žetonas: tekstas "pasauli!"
</p> // Žetonas: uždarymo žymė "p"

AST (DOM medžio) kūrimas: Remiantis žetonų seka, kuriamas mazgų medis (DOM). Naršyklė palaiko atvirų žymių staką; kai susiduria su uždarymo žyme, ji uždaro atitinkamą atvirą žymę iš stako ir prideda jos mazgą į medį.

<!-- Paprasta DOM struktūra -->
<!DOCTYPE html>
<html>
  <head>
    <title>Pavyzdys</title>
  </head>
  <body>
    <p>Tekstas</p>
  </body>
</html>

// DOM medis turės struktūrą, atitinkančią žymių įdėjimą.
// Pavyzdžiui, "p" mazgas bus "body" mazgo vaikas.

Skriptų ir stilių analizė: Analizuojant HTML, naršyklė susiduria su <script> ir <link>/<style> žymėmis:
- <script>: Iš pradžių, HTML analizė sustoja, skriptas įkeliama, analizuojama ir vykdoma. Po vykdymo, HTML analizė atnaujinama. async ir defer atributai keičia šį elgesį. async vykdo skriptą asinchroniškai, nesustabdo analizės. defer atideda skripto vykdymą iki HTML analizės pabaigos.
- <link> / <style>: CSS analizuojamas paraleliai su HTML ir sukuria CSS Object Model (CSSOM). <link> buvimas prieš <script> gali uždelsti skripto vykdymą, nes naršyklė gali laukti CSSOM sukūrimo, kad užtikrintų teisingą stilių taikymą prieš vykdant skriptą.