Come el browser elabora la pagina web?

Il processo di elaborazione di una pagina web da parte del browser può essere suddiviso in diverse fasi:

1. Richiesta e recupero della risorsa:

   • L'utente inserisce l'URL nella barra degli indirizzi o clicca su un link.
   • Il browser invia una richiesta HTTP al server.
   • Il server elabora la richiesta e invia una risposta, che di solito contiene un documento HTML.

2. Analisi sintattica (Parsing):

   • Il browser riceve il documento HTML sotto forma di byte.
   • Questi byte vengono decodificati in caratteri secondo la codifica specificata.
   • Il parser HTML analizza il documento carattere per carattere e costruisce l'albero DOM (Document Object Model). Il DOM rappresenta la struttura logica del documento.
   • Quando rileva tag <link> (per CSS) o <script> (per JavaScript), il browser inizia a scaricare queste risorse in parallelo con l'analisi dell'HTML.

3. Costruzione del CSSOM:

   • Il parser CSS analizza le regole CSS di tag <style>, <link> e stili inline.
   • Sulla base di queste regole, si costruisce l'albero CSSOM (CSS Object Model), che contiene tutti gli stili per ogni elemento della pagina.

4. Costruzione dell'albero di rendering (Render Tree):

   • Il Render Tree combina DOM e CSSOM. Contiene solo gli elementi che saranno visualizzati sulla pagina e gli stili corrispondenti.
   • Gli elementi con la regola CSS display: none; non sono inclusi nel Render Tree.

5. Layout (Reflow):

   • Il browser calcola le dimensioni e le posizioni esatte di ogni elemento sulla pagina basandosi sul Render Tree. Questo processo si chiama Layout o Reflow.
   • Il Layout avviene alla prima creazione del Render Tree e anche quando cambia la dimensione della finestra, vengono aggiunti o rimossi elementi, o cambiano i loro stili.

6. Painting:

   • Il browser disegna ogni elemento sullo schermo usando le informazioni del Render Tree e i risultati del passo di Layout.
   • La pittura può anche avvenire quando cambiano le proprietà visibili dell'elemento, come colore, sfondo, opacità, senza modificare la sua geometria (questo si chiama Repaint).

7. Composizione:

   • Gli elementi disegnati possono essere raggruppati in diversi strati per ottimizzare il rendering e l'animazione.
   • Questi strati vengono poi combinati per mostrare la pagina finale sullo schermo.

8. Esecuzione degli script:

   • Quando il parser HTML raggiunge il tag <script>, l'esecuzione dell'analisi HTML viene sospesa (di default), e il browser scarica, analizza ed esegue il codice JavaScript.
   • JavaScript può modificare DOM e CSSOM, il che può causare ripetuti passaggi di Layout e Painting.
   • Gli attributi async e defer per il tag <script> influenzano l'ordine e il momento di esecuzione degli script, permettendo di continuare l'analisi dell'HTML.

Ecco una visualizzazione approssimativa del flusso:

Richiesta HTTP
↓
Bytes HTML
↓
Parser HTML
→ Parser CSS (parallelo)
    ↓           ↓
    Albero DOM  Albero CSSOM
          ↓
     Albero di rendering
          ↓
        Layout
          ↓
       Painting
          ↓
     Composizione
          ↓
   Visualizzazione sullo schermo

L'esecuzione di JavaScript può interrompersi in diversi punti, causando ripetizioni:

Parser HTML + tag `<script>`
↓
Pausa dell'analisi HTML
↓
Download dello script
↓
Analisi dello script
↓
Esecuzione dello script
↓
(Può modificare DOM/CSSOM → Trigger Layout/Paint)
↓
Ripresa dell'analisi HTML

Comprendere questo processo è importante per ottimizzare le prestazioni delle pagine web.