Kako se učitava veb stranica?

Korisnik unosi URL u adresnu traku pretraživača ili klikće na link.
Parsiranje URL-a: Pretraživač analizira URL da odredi protokol, domen, port i putanju.
Pretraga IP adrese: Pretraživač proverava DNS keš, zatim keš operativnog sistema, i na kraju keš rutera. Ako adresa nije pronađena lokalno, šalje zahtev DNS serveru za dobijanje IP adrese domena.
Uspostavljanje TCP veze (Handshake): Pretraživač uspostavlja TCP vezu sa serverom na osnovu dobijene IP adrese (trostruki rukovanje: SYN -> SYN-ACK -> ACK).
Slanje HTTP zahteva: Pretraživač šalje HTTP zahtev (obično GET) serveru sa navedenim traženim resursom (putanja), zaglavljima (User-Agent, Accept-Encoding, Cookie itd.) i telom zahteva (ako postoji).
```
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  
```
Obrada zahteva od strane servera: Server prima zahtev, obrađuje ga (npr. izvršava skripte na strani servera) i formira HTTP odgovor.
Slanje HTTP odgovora: Server šalje HTTP odgovor nazad pretraživaču. Odgovor uključuje statusni kod (npr. 200 OK), zaglavlja (Content-Type, Content-Length, Cache-Control itd.) i telo odgovora (sadržaj traženog resursa, npr. HTML fajl).
```
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>  
```
Parsiranje HTML-a i izgradnja DOM-a: Pretraživač prima HTML kod i analizira ga, kreirajući objektnu modelu dokumenta (DOM - Document Object Model) u memoriji. DOM predstavlja stablo HTML elemenata.
Učitavanje i obrada resursa: Tokom parsiranja HTML-a, pretraživač nailazi na linkove ka drugim resursima (CSS, JavaScript, slike, fontovi itd.). Za svaki resurs se izvršavaju koraci 3-7 (pretraga IP, TCP veza, HTTP zahtev/odgovor). Učitavanje ovih resursa može se odvijati paralelno (ograničeno brojem istovremenih veza).
Izgradnja CSSOM: Pretraživač analizira CSS fajlove i blokove <style> u HTML-u, kreirajući CSS objektnu modelu (CSSOM - CSS Object Model). CSSOM predstavlja stilove primenjene na elemente stranice.
Izgradnja Render Tree: Pretraživač kombinuje DOM i CSSOM da bi kreirao render stablo (Render Tree). Render Tree sadrži samo vidljive elemente i njihove stilove. Elementi sa display: none nisu uključeni.
Layout (Reflow): Pretraživač izračunava tačno pozicioniranje i dimenzije svakog elementa na stranici na osnovu Render Tree, veličine prozora i stilova.
Painting (Repaint): Pretraživač crta svaki element na ekranu na izračunatim pozicijama i sa primenjenim stilovima. Ovo se dešava na slojevima.
Kombinovanje: Pretraživač kombinuje nacrtane slojeve u konačnu sliku koja se prikazuje na ekranu korisnika.
Izvršenje JavaScript-a: Tokom učitavanja i parsiranja skripti, JavaScript kod se izvršava. Izvršenje JavaScript-a može uticati na DOM i CSSOM, izazivajući ponovne korake Layout i Painting (Reflow/Repaint).

Ključni koraci prikazivanja sadržaja:

DOMContentLoaded: Događaj se aktivira kada pretraživač potpuno učita i parsira HTML dokument i izgradi DOM stablo, ali čeka na učitavanje stilskih tabela, slika i podokvira.
Load: Događaj se aktivira kada je cela stranica, uključujući slike, skripte, stilove i ostale resurse, potpuno učitana.