Kuidas brauser parsib HTML-faili?

Pehlemootor loeb HTML faili bait bait. Põhinedes faili kodeeringul, luuakse sümbolite voog. See voog parsitakse, moodustades tokenid (avatav ja sulgev silt, tekst, kommentaar, doctype). Tokenid muudetakse sõlmedeks (nodes), mis ühendatakse puuks — Document Object Model (DOM).

Parsimise protsess toimub järgmistes etappides:

Baitide lugemine: Puhlemootor saab baitide voo.
Kodeeringu määramine: Määratakse faili kodeering (näiteks UTF-8, Windows-1251). See võib toimuda HTTP päiste, <meta> siltide kaudu või automaatselt.
Sümbolite teisendamine: Baitid teisendatakse sümboliteks vastavalt määratud kodeeringule.

Tokeniseerimine: Sümbolite voog jaguneb tokeniteks.

<!-- Tokenite näide -->
<p> // Token: avav silt "p"
  Tere, // Token: tekst "Tere, "
  maailm! // Token: tekst "maailm!"
</p> // Token: sulgev silt "p"

AST (DOM puu) loomine: Tokenite järjesti põhjal luuakse sõlmede puu (DOM). Puhlemootor hoiab avatud siltide virna; kui ta kohtab sulgev sildi, sulgeb ta vastava avatud sildi virnast ja lisab selle sõlme puule.

<!-- Lihtne DOM struktuur -->
<!DOCTYPE html>
<html>
  <head>
    <title>Näide</title>
  </head>
  <body>
    <p>Tekst</p>
  </body>
</html>

// DOM puu omab struktuuri, mis peegeldab siltide sisestust.
// Näiteks "p" sõlm on "body" sõlme järglane.

Skriptide ja stiilide parseldamine: HTML parsimise ajal kohtab puhlemootor <script> ja <link>/<style> sildid:
- <script>: Alguses peatub HTML parsimine, skript laaditakse, parsitakse ja täidetakse. Pärast täitmist jätkub HTML parsimine. async ja defer atribuudid muudavad seda käitumist. async täidab skripti asünkroonselt, ei takista parsimist. defer lükkab skripti täitmise HTML parsimise lõpuni.
- <link> / <style>: CSS parsitakse paralleelselt HTML-iga ja luuakse CSS Object Model (CSSOM). <link> olemasolu enne <script> võib viivitada skripti täitmise, kuna brauser võib oodata CSSOM-i loomist, et tagada õige stiilide rakendamine enne skripti täitmist.