Kuidas laaditakse veebilehte?

Kasutaja sisestab URL-i brauseri aadressiribale või klikib lingil.
URL-i analüüs: Brauser analüüsib URL-i, et määrata protokoll, domeen, port ja tee.
IP-aadressi otsimine: Brauser kontrollib DNS-vahemälu, siis operatsioonisüsteemi vahemälu, siis ruuteri vahemälu. Kui aadressi ei leita kohapeal, saadetakse päring DNS-serverile domeeninime IP-aadressi saamiseks.
TCP-ühenduse loomine (Handshake): Brauser loob TCP-ühenduse serveriga vastavalt saadud IP-aadressile (kolmepoolne käepigistus: SYN -> SYN-ACK -> ACK).
HTTP-päringu saatmine: Brauser saadab HTTP-päringu (tavaliselt GET) serverile nõutava ressursi (tee), päistega (User-Agent, Accept-Encoding, Cookie jms) ja päringu kehas (kui on).
```
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  
```
Päringu töötlemine serveris: Server saab päringu, töötleb seda (näiteks täidab serveripoolseid skripte) ja koostab HTTP-vastuse.
HTTP-vastuse saatmine: Server saadab HTTP-vastuse brauserile. Vastus sisaldab staatusekoodi (näiteks 200 OK), päiseid (Content-Type, Content-Length, Cache-Control jms) ja vastuse keha (päringus olev ressurss, näiteks HTML-fail).
```
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-i analüüs ja DOM-i loomine: Brauser hakkab saama HTML-koodi ja analüüsib seda, luues dokumendi objekti mudeli (DOM - Document Object Model) mällu. DOM kujutab endast HTML-elementide puu.
Resursside laadimine ja töötlemine: HTML-i analüüsi käigus kohtab brauser linke teistele ressurssidele (CSS, JavaScript, pildid, fondid jms). Iga ressursi puhul tehakse sammud 3-7 (IP otsing, TCP ühendus, HTTP päring/vastus). Ressursside laadimine võib toimuda paralleelselt (piirates samaaegsete ühenduste arvu).
CSSOM-i loomine: Brauser analüüsib CSS-faile ja <style>-bloke HTML-is, luues CSS objekti mudeli (CSSOM - CSS Object Model). CSSOM kujutab endast elementidele rakendatavaid stiile.
Render Tree loomine: Brauser ühendab DOM-i ja CSSOM-i, et luua renderimispuu (Render Tree). Render Tree sisaldab ainult nähtavaid elemente ja nende stiile. Elemendid display: none ei kuulu.
Layout (Reflow): Brauser arvutab iga elemendi täpse positsiooni ja suuruse maketil, lähtudes Render Tree-st, vaateakna suurusest ja stiilidest.
Värvimine (Repaint): Brauser joonistab iga elemendi ekraanile arvutatud positsioonidel ja stiilidega. See toimub kihtides.
Komponeerimine: Brauser ühendab joonistatud kihid lõplikuks pildiks, mis kuvatakse kasutaja ekraanil.
JavaScripti täitmine: Skriptide laadimise ja analüüsi ajal täidetakse JavaScripti kood. JavaScripti täitmine võib mõjutada DOM-i ja CSSOM-i, põhjustades uuesti Layout ja Painting samme (Relayout/Repaint).