Cum se încarcă o pagină web?

Utilizatorul introducează URL-ul în bara de adrese a browserului sau face clic pe un link.
Analiza URL: Browserul analizează URL-ul pentru a determina protocolul, domeniul, portul și calea.
Căutarea adresei IP: Browserul verifică cache-ul DNS, apoi cache-ul sistemului de operare, apoi cache-ul routerului. Dacă adresa nu este găsită local, se trimite o solicitare către serverul DNS pentru a obține adresa IP a numelui de domeniu.
Stabilirea conexiunii TCP (Handshake): Browserul stabilește o conexiune TCP cu serverul folosind adresa IP obținută (strângere de mână în trei pași: SYN -> SYN-ACK -> ACK).
Trimiterea solicitării HTTP: Browserul trimite o solicitare HTTP (de obicei GET) către server, indicând resursa solicitată (calea), anteturile (User-Agent, Accept-Encoding, Cookie etc.) și corpul solicitării (dacă există).
```
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  
```
Procesarea solicitării de către server: Serverul primește solicitarea, o procesează (de exemplu, execută scripturi pe partea serverului) și generează un răspuns HTTP.
Trimiterea răspunsului HTTP: Serverul trimite răspunsul HTTP înapoi către browser. Răspunsul include codul de stare (de exemplu, 200 OK), anteturile (Content-Type, Content-Length, Cache-Control etc.) și corpul răspunsului (conținutul resursei solicitate, de exemplu, fișier 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>  
```
Analiza HTML și construirea DOM: Browserul începe să primească codul HTML și să îl analizeze, creând un model de obiect al documentului (DOM - Document Object Model) în memorie. DOM reprezintă un arbore de elemente HTML.
Încărcarea și procesarea resurselor: În timpul analizei HTML, browserul găsește legături către alte resurse (CSS, JavaScript, imagini, fonturi etc.). Pentru fiecare resursă, se repetă pașii 3-7 (căutare IP, conexiune TCP (dacă este necesar), solicitare/răspuns HTTP). Încărcarea acestor resurse poate avea loc în paralel (limitat de numărul de conexiuni simultane).
Construirea CSSOM: Browserul analizează fișierele CSS și blocurile <style> din HTML, creând un model de obiect CSS (CSSOM - CSS Object Model). CSSOM reprezintă stilurile aplicabile elementelor de pe pagină.
Construirea arborelui de randare: Browserul combină DOM și CSSOM pentru a construi arborele de randare (Render Tree). Arborele de randare conține doar elementele vizibile ale paginii și stilurile lor. Elementele cu display: none nu sunt incluse.
Layout (Reflow): Browserul calculează poziția și dimensiunea exactă a fiecărui element în layout, bazându-se pe arborele de randare, dimensiunile ferestrei de vizualizare și stiluri.
Vopsirea (Repaint): Browserul desenează fiecare element pe ecran în pozițiile calculate și cu stilurile aplicate. Acest lucru se întâmplă pe straturi.
Compoziție: Browserul combină straturile desenate în imaginea finală afișată pe ecranul utilizatorului.
Executarea JavaScript: Pe măsură ce scripturile sunt încărcate și analizate, codul JavaScript este executat. Executarea JavaScript poate influența DOM și CSSOM, provocând pași repetati de Layout și Painting (Reflow/Repaint).

Etape cheie pentru afișarea conținutului:

DOMContentLoaded: Evenimentul se declanșează când browserul a încărcat complet și a analizat documentul HTML și a construit arborele DOM, dar așteaptă încărcarea foilor de stil, imaginilor și subramelor.
Load: Evenimentul se declanșează când întreaga pagină, inclusiv imaginile, scripturile, stilurile și alte resurse, este complet încărcată.