Cum procesează browserul pagina web?

Analiza URL: Browserul analizează URL-ul pentru a determina protocolul, numele de domeniu și calea către resursă.
Cerere DNS: Dacă numele de domeniu nu este încă în cache-ul local, browserul trimite o cerere DNS pentru a obține adresa IP a serverului.
Stabilirea conexiunii TCP: Browserul stabilește o conexiune TCP cu serverul folosind adresa IP obținută.
Cerere HTTP: Browserul trimite o cerere HTTP către server, solicitând pagina web dorită.
Primirea răspunsului HTTP: Serverul procesează cererea și trimite un răspuns HTTP care conține codul HTML, CSS, JavaScript și alte resurse.
Analiza HTML: Browserul începe să analizeze HTML-ul primit, creând un arbore DOM (Document Object Model).
Încărcarea resurselor: În timpul analizei HTML, browserul detectează link-uri către alte resurse (CSS, JS, imagini) și începe să le încarce, adesea în paralel.
Analiza CSS: Browserul analizează CSS-ul, creând un arbore CSSOM (CSS Object Model).
Construirea arborelui de randare (Render Tree): Combinând DOM și CSSOM, browserul creează un arbore de randare care conține doar nodurile vizibile și stilurile lor.
Layout: Browserul calculează dimensiunile geometrice și poziția fiecărui element pe pagină.
Desenare: Browserul desenează pixeli pentru fiecare element pe ecran, bazându-se pe arborele de randare și rezultatele layout-ului.
Compositing: Dacă pagina conține straturi (de exemplu, din cauza proprietăților CSS precum transform sau opacity), browserul combină aceste straturi pentru a afișa imaginea finală.
Procesarea JavaScript: La detectarea tag-urilor <script> sau a scripturilor inline, browserul analizează, compilează și execută JavaScript. JavaScript-ul poate modifica DOM, CSSOM și influența etapele de layout și desen, ceea ce poate duce la repetarea acestor pași.