Чӣ тавр бор кардани саҳифаи веб?

Истифодабаранда URL-ро дар сатри суроғаи браузер ворид мекунад ё ба линк клик мекунад.
Парс кардани URL: Браузер URL-ро таҳлил мекунад, то протокол, домен, порт ва роҳро муайян кунад.
Ҷустуҷӯи IP-роҳ: Браузер кеши DNS-ро санҷида, сипас кеши системаи оператсионӣ ва дар охир кеши маршрутизаторро месанҷад. Агар суроға дар маҳал ёфтан наметавонад, дархост ба сервери 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 - Document Object Model) дар хотираро месозад. DOM дарахти унсурҳои HTML-ро намояндагӣ мекунад.
Зеркашӣ ва коркарди манбаъҳо: Дар вақти таҳлили HTML, браузер ба пайвандҳо ба манбаъҳои дигар (CSS, JavaScript, тасвирҳо, шрифтовҳо ва ғайра) рӯбарӯ мешавад. Барои ҳар як манбаъ, қадамҳои 3-7 такрор мешаванд (ҷустуҷӯи IP, TCP, HTTP дархост/ҷавоб). Зеркашии ин манбаъҳо метавонад параллелӣ бошад (бо маҳдуд кардани шумораи пайвастагиҳо).
Таҳияи CSSOM: Браузер CSS файлҳо ва блокҳои <style> дар HTML-ро таҳлил мекунад ва модел ё объектии CSS (CSSOM - CSS Object Model) месозад. CSSOM стилҳоро, ки ба унсурҳои саҳифа татбиқ мешаванд, намояндагӣ мекунад.
Таҳияи Render Tree: Браузер DOM ва CSSOM-ро ба ҳам мепайвандад ва дарахти рендер (Render Tree) месозад. Render Tree танҳо унсурҳои намоён ва стилҳояшонро дар бар мегирад. Унсурҳое, ки бо display: none нишон дода шудаанд, дохил намешаванд.
Layout (Reflow): Браузер ҷойгиршавӣ ва андозаи дақиқи ҳар унсурро дар саҳифа ҳисоб мекунад, асосан ба Render Tree, андозаи тиреза ва стилҳо такя мекунад.
Рисориш (Repaint): Браузер ҳар унсурро дар экран бо ҷойгиршавии ҳисобшуда ва стилҳои татбиқшуда мекарад. Ин дар қабатҳои алоҳида сурат мегирад.
Ҳамгироӣ: Браузер қабатҳои рангкардаро ба суратҳисоби ниҳоӣ мепайвандад, ки дар экрани корбар намоиш дода мешавад.
Иҷрои JavaScript: Дар вақти боркунӣ ва таҳлили скриптҳо, коди JavaScript иҷро мешавад. Иҷрои JavaScript метавонад DOM ва CSSOM-ро таъсир расонад ва қадамҳои Layout ва Painting-ро такрор кунад (Reflow/Repaint).

Қадамҳои асосии намоиши мундариҷа:

DOMContentLoaded: Воқеа вақте ба амал меояд, ки браузер HTML-ро пурра бор ва таҳлил кардааст ва дарахти DOM-ро сохтааст, аммо интизор аст, ки таблицаву стилҳо, тасвирҳо ва рамзҳои зерсохт бор карда шаванд.
Load: Воқеа вақте ба амал меояд, ки тамоми саҳифа, аз ҷумла тасвирҳо, скриптҳо, стилҳо ва дигар манбаъҳо, пурра бор шудааст.