Ինչպե՞ս է բեռնում վեբ էջը։

Օգտագործողը մուտքագրում է URL հասցեն բրաուզերի հասցեային տողում կամ սեղմում է հղման վրա:
URL-ի վերլուծություն: Բրաուզերը վերլուծում է URL-ը՝ որոշելու համար պրոտոկոլը, դոմենը, պորտը և ուղին:
IP հասցեի որոնում: Բրաուզերը ստուգում է DNS cache-ը, ապա օպերացիոն համակարգի cache-ը, և վերջում ռոուտերի cache-ը: Եթե հասցեն չի գտնվել տեղական մակարդակում, ուղարկվում է հարց DNS սերվերին՝ դոմենային անունի IP հասցեն ստանալու համար:
TCP կապի հաստատում (Handshake): Բրաուզերը հաստատում է TCP կապը սերվերի հետ՝ ստացված IP հասցեի միջոցով (երեք կողմանի ձեռնամուխություն՝ SYN -> SYN-ACK -> ACK):
HTTP հարցի ուղարկում: Բրաուզերը ուղարկում է HTTP հարց (հաճախ GET) սերվերին՝ նշելով պահանջվող ռեսուրսը (ուղին), գլխագրերը (User-Agent, Accept-Encoding, Cookie և այլն) և հարցի մարմինը (եթե կա):
```
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  
```
Հարցի մշակումը սերվերում: Սերվերը ստանում է հարցը, մշակել այն (օրինակ՝ սերվերի կողմի սցենարներ գործարկել) և կազմել HTTP պատասխան:
HTTP պատասխան ուղարկում: Սերվերը վերադարձնում է HTTP պատասխան բրաուզերին՝ պարունակելով վիճակային կոդ (օրինակ՝ 200 OK), գլխագրեր (Content-Type, Content-Length, Cache-Control և այլն) և պատասխան մարմինը (պահանջվող ռեսուրսի պարունակությունը, օրինակ՝ 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>  
```
HTML-ի վերլուծություն և DOM-ի կառուցում: Բրաուզերը ստանում է HTML կոդը և վերլուծում այն՝ ստեղծելով փաստաթղթի օբյեկտային մոդելը (DOM) հիշողության մեջ: DOM-ը ներկայացնում է HTML տարրերի ծառը:
Ռեսուրսների բեռնում և մշակում: HTML վերլուծության ժամանակ, բրաուզերը հանդիպում է այլ ռեսուրսների հղումներին (CSS, JavaScript, պատկերներ, ֆոնտեր և այլն): Ամեն ռեսուրսի համար կատարվում են քայլեր 3-7 (IP որոնում, TCP կապ, HTTP հարց/պատասխան): Այս ռեսուրսների բեռնումը կարող է կատարվել զուգահեռ (սահմանափակելով միաժամանակյա կապերի քանակը):
CSSOM-ի կառուցում: Բրաուզերը վերլուծում է CSS ֆայլերը և <style> բլոկները HTML-ում, ստեղծելով CSS օբյեկտային մոդելը (CSSOM): CSSOM-ը ներկայացնում է էջին կիրառվող ոճերը:
Render Tree-ի կառուցում: Բրաուզերը միավորում է DOM-ը և CSSOM-ը՝ ստեղծելու ռենդերային ծառը (Render Tree): Render Tree-ն պարունակում է միայն տեսանելի տարրերը և նրանց ոճերը: display: none ունեցող տարրերը չեն ներառվում:
Layout (Reflow): Բրաուզերը հաշվարկում է յուրաքանչյուր տարրի ճշգրիտ դիրքը և չափերը էջում՝ հիմնվելով Render Tree-ի վրա, պատուհանի չափի և ոճերի վրա:
Painting (Repaint): Բրաուզերը նկարում է յուրաքանչյուր տարր էկրանին՝ հաշվարկված դիրքերում և կիրառված ոճերով: Սա կատարվում է շերտերով:
Կոմպոզիցիա: Բրաուզերը միավորում է նկարված շերտերը՝ ստանալու վերջնական պատկերը, որը ցուցադրվում է օգտատիրոջ էկրանին:
JavaScript-ի կատարում: Բեռնում և վերլուծում ժամանակ, JavaScript կոդը կատարվում է: JavaScript-ի կատարումը կարող է ազդել DOM և CSSOM-ի վրա՝ առաջացնելով Layout և Painting քայլերի կրկնություն (Reflow/Repaint):

Ներկայացման հիմնական փուլերը:

DOMContentLoaded: իրադարձությունը տեղի է ունենում, երբ բրաուզերը ամբողջությամբ բեռնում և վերլուծում է HTML փաստաթուղթը և կառուցում է DOM ծառը, բայց սպասում է ոճային աղյուսակների, պատկերների և ենթաֆրեյմերի բեռնումին:
Load: իրադարձությունը տեղի է ունենում, երբ ամբողջ էջը, ներառյալ պատկերները, սցրիպտները, ոճերը և այլ ռեսուրսները, ամբողջությամբ բեռնված է։