Come el browser elabora la pagina web?

Analisi URL: Il browser analizza l'URL per determinare il protocollo, il nome di dominio e il percorso alla risorsa.
Richiesta DNS: Se il nome di dominio non è ancora nella cache locale, il browser invia una richiesta DNS per ottenere l'indirizzo IP del server.
Stabilire la connessione TCP: Il browser stabilisce una connessione TCP con il server usando l'indirizzo IP ottenuto.
Richiesta HTTP: Il browser invia una richiesta HTTP al server, richiedendo la pagina web desiderata.
Ricezione della risposta HTTP: Il server elabora la richiesta e invia una risposta HTTP contenente il codice HTML, CSS, JavaScript e altre risorse.
Analisi HTML: Il browser inizia ad analizzare l'HTML ricevuto, creando un albero DOM (Document Object Model).
Caricamento delle risorse: Durante l'analisi HTML, il browser rileva link ad altre risorse (CSS, JS, immagini) e inizia a caricarle, spesso in parallelo.
Analisi CSS: Il browser analizza il CSS, creando un albero CSSOM (CSS Object Model).
Costruzione dell'albero di rendering (Render Tree): Combinando DOM e CSSOM, il browser crea un albero di rendering che contiene solo i nodi visibili e i loro stili.
Layout: Il browser calcola le dimensioni geometriche e la posizione di ogni elemento sulla pagina.
Pittura: Il browser disegna i pixel per ogni elemento sullo schermo, basandosi sull'albero di rendering e sui risultati del layout.
Compositing: Se la pagina contiene layer (ad esempio, a causa di proprietà CSS come transform o opacity), il browser combina questi layer per mostrare l'immagine finale.
Elaborazione JavaScript: Quando vengono rilevate tag <script> o script inline, il browser analizza, compila ed esegue JavaScript. JavaScript può modificare DOM, CSSOM e influenzare le fasi di layout e pittura, causando potenzialmente ripetizioni di questi passaggi.