Come il browser analizza un file HTML?

Il browser legge il file HTML byte per byte. Viene costruito un flusso di caratteri in base alla codifica del file. Questo flusso viene analizzato, formando token (tag di apertura e chiusura, testo, commento, doctype). I token vengono trasformati in nodi (nodes), che vengono collegati in un albero: il Document Object Model (DOM).

Il processo di parsing attraversa le seguenti fasi:

Lettura dei byte: Il browser riceve un flusso di byte.
Determinazione della codifica: Viene determinata la codifica del file (ad esempio, UTF-8, Windows-1251). Questo può avvenire tramite intestazioni HTTP, tag <meta> o rilevamento automatico.
Conversione in caratteri: I byte vengono convertiti in caratteri secondo la codifica determinata.

Tokenizzazione: Il flusso di caratteri viene suddiviso in token.

<!-- Esempio di token -->
<p> // Token: tag di apertura "p"
  Ciao, // Token: testo "Ciao, "
  mondo! // Token: testo "mondo!"
</p> // Token: tag di chiusura "p"

Costruzione dell'AST (Albero DOM): A partire dalla sequenza di token, si costruisce un albero di nodi (DOM). Il browser mantiene uno stack di tag aperti; quando incontra un tag di chiusura, chiude il tag corrispondente nello stack e aggiunge il suo nodo all'albero.

<!-- Struttura DOM semplice per: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Esempio</title>
  </head>
  <body>
    <p>Testo</p>
  </body>
</html>

// L'albero DOM avrà una struttura che riflette l'annidamento dei tag.
// Ad esempio, il nodo "p" sarà figlio del nodo "body".

Parsing di script e stili: Durante il parsing HTML, il browser incontra i tag <script> e <link>/<style>.
- <script>: Per impostazione predefinita, il parsing HTML viene sospeso, lo script viene caricato, analizzato ed eseguito. Dopo l'esecuzione, il parsing HTML riprende. Gli attributi async e defer modificano questo comportamento. async esegue lo script in modo asincrono, senza bloccare il parsing. defer ritarda l'esecuzione dello script fino al completamento del parsing HTML.
- <link> / <style>: Il CSS viene analizzato in parallelo con l'HTML e crea un Modello di Oggetto CSS (CSSOM). La presenza di <link> prima di <script> può ritardare l'esecuzione dello script, poiché il browser può attendere la costruzione del CSSOM per garantire l'applicazione corretta degli stili prima dell'esecuzione dello script.