Come viene interpretato un documento HTML

Quando iniziai a studiare i linguaggi web avevo solo 13 anni, come autodidatta mi focalizzai molto sulla parte pratica e poco sulla parte teorica. Quando più avanti decisi di ricostrutire le mie conoscenze dalle fondamenta, ricominciai con HTML, ma prima ancora di HTML, studiai ciò che permette di interpretare l’HTML, il browser.

Infatti, per poter comprendere a pieno come un documento HTML viene renderizzato in pagina è dal browser che bisogna partire.

Com’è fatto un browser

Lo schema di come è strutturato un browser

Il browser è quel software che ci permette di navigare sul web (non su Internet, il web è un servizio di Internet). La sua struttura, di base, è molto semplice e prevedere 7 componenti principali:

1. User Interface: ciò che è grafico (barra degli indirizzi, navigazione nella cronologia, tasto home, ecc.) è gestito dal componente di User Interface
2. Browser Engine: esegue il marshalling (traduzione delle informazioni) tra il componente di User Interface e il Rendering Engine.
3. Rendering Engine: elabora e mostra il contenuto richiesto (ad esempio un documento HTML)
4. Networking: gestisce le chiamate alla rete, come le richieste HTTP
5. UI Backend: ogni sistema operativo renderizza in maniera differente elementi come bottoni e input, questo perché il componente di UI Backend si interfaccia al sistema operativo per renderizzli correttamente, ciò significa che gli utenti Apple li vedranno in maniera differente rispetto agli utenti Windows.
6. Javascript Interpreter: analizza ed esegue il codice Javascript. Consideriamo che il linguaggio Javascript non viene interpretato direttamente dal computer, i browser sono dotati di un motore apposito per poter interpretare Javascript. Quando Google fece diventare open source il suo motore JS nel 2008, il V8, l’anno successivo venne rilasciato Node.js il quale permette di eseguire Javascript al di fuori dal browser rendendolo idoneo anche all’utilizzo server side.
7. Data Storage: livello persistente che serve al browser per salvare dei dati in memoria, come i cookie, la local e la session storage.

Per quanto ci sarebbe da scrivere all’infinito sui vari componenti, in questo articolo ci soffermeremo esclusivamente sul rendering engine, il componente che si occupa dell’elaborazione dell’HTML.

Il Rendering Engine

Lo scopo del Rendering Engine lo si può evincere dal nome, infatti il suo compito è quello di renderizzare.

Di default renderizza documenti HTML, XML, SVG (tutti derivanti dallo SGML), immagini e, nativamente o per mezzo di estensioni, documenti PDF.

Ci sono diversi motori di rendering sul mercato: Explorer ed Edge usano Trident, Firefox usa Gecko, Safari usa Webkit, Chrome e Opera usano Blink (versione modificata del Webkit di Apple). Negli anni Trident si è rivelato inefficiente, ciò ha portato Microsoft a iniziare lo sviluppo di una versione di Edge con Blink.

Il motore di rendering Webkit è open source e inizialmente veniva usato esclusivamente su Linux, Apple lo modificò per supportare Mac e Windows.

Come svolge il suo lavoro il Rendering Engine

Il motore di rendering comincia il recupero dei contenuti del documento richiesto dal componente di Networking. Lo scambio avviene solitamente in pezzi da 8 kB (kilobyte), detti chunks.

Una volta recuperati i contenuti, inizierà l’analisi del documento HTML e convertirà i vari elementi in nodi DOM in un albero chiamanto “content tree”.

Successivamente analizza i dati di stile, sia dai file CSS esteri che da quelli interni al documento HTML che gli è stato restituito in prima battuta dal server. Le informazioni saranno usate per creare un nuovo albero il “render tree”.

Il render tree contiene i vari elementi sottoforma di rettangoli, i quali verranno distribuiti nella pagina nell’esatto ordine in cui devono essere mostrati.

Ogni elemento all’interno di una pagina web è un rettangolo

Il mio momento “Aha!” nel tentativo di capire il CSS

Dopo la costruzione del render tree è giunto il momento di “dipingere” la pagina web. Il render tree viene quindi attraversato elemento dopo elemento e viene mostrato a video grazie al componente “UI Backend”.

Questo è quello che accade quando il browser deve mostrare un documento HTML, non male vero? Sopratutto il mio momento Aha! Quel concetto mi è servito per comprendere meglio il CSS e il modo in cui gli elementi appaiono in pagina.