Kaip įkelti tinklalapį?

Vartotojas įveda URL adresą naršyklės adreso juostoje arba paspaudžia nuorodą.
URL analizė: Naršyklė analizuoja URL, kad nustatytų protokolą, domeną, prievadą ir kelią.
IP adreso paieška: Naršyklė tikrina DNS cache, tada operacinės sistemos cache, tada maršrutizatoriaus cache. Jei adresas nerandamas vietoje, siunčiama užklausa DNS serveriui gauti domeno IP adresą.
TCP ryšio nustatymas (Handshake): Naršyklė nustato TCP ryšį su serveriu pagal gautą IP adresą (trijų žingsnių rankos paspaudimas: SYN -> SYN-ACK -> ACK).
HTTP užklausos siuntimas: Naršyklė siunčia HTTP užklausą (dažniausiai GET) serveriui su reikiamu resursu (kelias), antraštėmis (User-Agent, Accept-Encoding, Cookie ir kt.) ir užklausos kūnu (jei yra).
```
GET /index.html HTTP/1.1  
Host: pavyzdys.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
Užklausos apdorojimas serveryje: Serveris gauna užklausą, apdoroja ją (pavyzdžiui, vykdo serverio pusės skriptus) ir sukuria HTTP atsakymą.
HTTP atsakymo siuntimas: Serveris siunčia HTTP atsakymą atgal naršyklei. Atsakymas apima statuso kodą (pvz., 200 OK), antraštes (Content-Type, Content-Length, Cache-Control ir kt.) ir atsakymo turinį (prašomas resursas, pvz., HTML failas).
```
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>  
```
HTML analizė ir DOM kūrimas: Naršyklė pradeda gauti HTML kodą ir jį analizuoti, kuria dokumento objektinį modelį (DOM - Document Object Model) atmintyje. DOM vaizduoja HTML elementų medį.
Resursų įkėlimas ir apdorojimas: Analizuojant HTML, naršyklė susiduria su nuorodomis į kitus resursus (CSS, JavaScript, paveikslėliai, šriftai ir kt.). Kiekvienam resursui atliekami 3-7 žingsniai (IP paieška, TCP ryšys, HTTP užklausa/atsakymas). Resursų įkėlimas gali vykti lygiagrečiai (ribojant vienalaikių ryšių skaičių).
CSSOM kūrimas: Naršyklė analizuoja CSS failus ir <style> blokus HTML, kuria CSS objektinį modelį (CSSOM - CSS Object Model). CSSOM vaizduoja stilius, taikomus elementams puslapyje.
Render Tree kūrimas: Naršyklė sujungia DOM ir CSSOM, kad sukurtų renderinimo medį (Render Tree). Render Tree apima tik matomus elementus ir jų stilius. Elementai su display: none nėra įtraukiami.
Layout (Reflow): Naršyklė apskaičiuoja tikslią kiekvieno elemento padėtį ir dydį makete, remiantis Render Tree, lango dydžiu ir stiliumi.
Painting (Repaint): Naršyklė nupiešia kiekvieną elementą ekrane pagal apskaičiuotas pozicijas ir taikytus stilius. Tai vyksta sluoksniuose.
Kompozicija: Naršyklė sujungia nupieštus sluoksnius į galutinį vaizdą, kuris rodomas naudotojo ekrane.
JavaScript vykdymas: Kartu su skriptų įkėlimu ir analize, JavaScript kodas vykdomas. JavaScript vykdymas gali paveikti DOM ir CSSOM, sukeldamas pakartotinį Layout ir Painting žingsnius (Relayout/Repaint).