Cum parsează browserul un fișier HTML?

Browser-ul citește fișierul HTML byte cu byte. Pe baza codificării fișierului, se construiește un flux de caractere. Acest flux este analizat, formând token-uri (eticheta de deschidere și închidere, text, comentariu, doctype). Token-urile sunt transformate în noduri (nodes), care sunt legate într-un copac: Document Object Model (DOM).

Procesul de analiză trece prin următoarele etape:

Citirea bytes: Browser-ul primește un flux de bytes.
Determinarea codificării: Se determină codificarea fișierului (de exemplu, UTF-8, Windows-1251). Acest lucru se poate face prin anteturi HTTP, etichete <meta> sau detectare automată.
Conversia în caractere: Bytes-urile sunt convertite în caractere conform codificării determinate.

Tokenizare: Fluxul de caractere este împărțit în token-uri.

<!-- Exemplu de token-uri -->
<p> // Token: etichetă de deschidere "p"
  Salut, // Token: text "Salut, "
  lume! // Token: text "lume!"
</p> // Token: etichetă de închidere "p"

Construirea arborelui AST (DOM): Pe baza secvenței de token-uri, se construiește un arbore de noduri (DOM). Browser-ul menține un stivă de etichete deschise; când întâlnește o etichetă de închidere, închide eticheta corespunzătoare din stivă și adaugă nodul său în arbore.

<!-- Structură DOM simplă pentru: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Exemplu</title>
  </head>
  <body>
    <p>Text</p>
  </body>
</html>

// Arborele DOM va avea o structură care reflectă imbricarea etichetelor.
// De exemplu, nodul "p" va fi copil al nodului "body".

Analiza scripturilor și stilurilor: În timpul analizei HTML, browser-ul întâlnește etichetele <script> și <link>/<style>.
- <script>: În mod implicit, analiza HTML este suspendată, scriptul este încărcat, analizat și executat. După executare, analiza HTML se reia. Atributurile async și defer schimbă acest comportament. async execută scriptul asincron, fără a bloca analiza. defer amână executarea scriptului până la finalizarea analizei HTML.
- <link> / <style>: CSS-ul este analizat în paralel cu HTML-ul și creează Modelul Obiect CSS (CSSOM). Prezența <link> înainte de <script> poate întârzia executarea scriptului, deoarece browser-ul poate aștepta construirea CSSOM pentru a asigura aplicarea corectă a stilurilor înainte de executarea scriptului.