Come viene caricata una pagina web?

L'utente inserisce un URL nella barra degli indirizzi del browser o clicca su un link.
Parsing dell'URL: Il browser analizza l'URL per determinare il protocollo, il dominio, la porta e il percorso.
Ricerca dell'indirizzo IP: Il browser verifica la cache DNS, poi la cache del sistema operativo, poi la cache del router. Se l'indirizzo non viene trovato localmente, invia una richiesta al server DNS per ottenere l'indirizzo IP del nome di dominio.
Stabilire la connessione TCP (Handshake): Il browser stabilisce una connessione TCP con il server usando l'indirizzo IP ottenuto (stretta di mano a tre vie: SYN -> SYN-ACK -> ACK).
Invio della richiesta HTTP: Il browser invia una richiesta HTTP (di solito GET) al server indicando la risorsa richiesta (percorso), gli header (User-Agent, Accept-Encoding, Cookie, ecc.) e il corpo della richiesta (se presente).
```
GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
Elaborazione della richiesta dal server: Il server riceve la richiesta, la elabora (ad esempio, esegue script lato server) e genera una risposta HTTP.
Invio della risposta HTTP: Il server invia la risposta HTTP al browser. La risposta include il codice di stato (ad esempio, 200 OK), gli header (Content-Type, Content-Length, Cache-Control, ecc.) e il corpo della risposta (contenuto della risorsa richiesta, ad esempio, un file HTML).
```
HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>  
```
Parsing dell'HTML e creazione del DOM: Il browser inizia a ricevere il codice HTML e ad analizzarlo, creando un modello di oggetto del documento (DOM - Document Object Model) in memoria. Il DOM rappresenta un albero di elementi HTML.
Caricamento e elaborazione delle risorse: Durante il parsing dell'HTML, il browser trova link ad altre risorse (CSS, JavaScript, immagini, font, ecc.). Per ogni risorsa, vengono ripetuti i passaggi 3-7 (ricerca IP, connessione TCP (se necessario), richiesta/risposta HTTP). Il caricamento di queste risorse può avvenire in parallelo (limitato dal numero di connessioni simultanee).
Costruzione del CSSOM: Il browser analizza i file CSS e i blocchi <style> in HTML, creando un modello di oggetto CSS (CSSOM - CSS Object Model). Il CSSOM rappresenta gli stili applicabili agli elementi della pagina.
Costruzione dell'albero di rendering: Il browser combina DOM e CSSOM per costruire l'albero di rendering (Render Tree). L'albero di rendering contiene solo gli elementi visibili della pagina e i loro stili. Gli elementi con display: none non sono inclusi.
Layout (Reflow): Il browser calcola la posizione e le dimensioni esatte di ogni elemento nel layout, basandosi sull'albero di rendering, sulle dimensioni della finestra di visualizzazione e sugli stili.
Pittura (Repaint): Il browser disegna ogni elemento sullo schermo nelle posizioni calcolate e con gli stili applicati. Questo avviene sui layer.
Compositing: Il browser combina i layer disegnati nell'immagine finale visualizzata sullo schermo dell'utente.
Esecuzione di JavaScript: Man mano che i script vengono caricati e analizzati, il codice JavaScript viene eseguito. L'esecuzione di JavaScript può influenzare DOM e CSSOM, causando ripetuti passaggi di Layout e Painting (Reflow/Repaint).

Fasi chiave per la visualizzazione del contenuto:

DOMContentLoaded: L'evento si verifica quando il browser ha completamente caricato e analizzato il documento HTML e ha costruito il DOM, ma aspetta il caricamento di fogli di stile, immagini e iframe.
Load: L'evento si verifica quando l'intera pagina, comprese immagini, script, stili e altre risorse, è completamente caricata.