Veb səhifə necə yüklənir?

İstifadəçi brauzerin ünvan sətrinə URL daxil edir və ya linkə klikləyir.
URL-nin parsinqi: Brauzer URL-ni analiz edir və protokol, domen, port və yolunu müəyyən edir.
IP ünvanının axtarışı: Brauzer DNS keşi, sonra əməliyyat sistemi keşi, sonra marşrutlaşdırıcı keşi ilə yoxlayır. Əgər ünvan lokal olaraq tapılmazsa, domen adının IP ünvanını almaq üçün DNS serverinə sorğu göndərilir.
TCP əlaqəsinin qurulması (HandShake): Brauzer əldə edilmiş IP ünvanı ilə serverlə TCP əlaqəsi qurur (üç tərəfli əl sıxma: SYN -> SYN-ACK -> ACK).
HTTP sorğusunun göndərilməsi: Brauzer serverə tələb olunan resursu (yol), başlıqları (User-Agent, Accept-Encoding, Cookie və s.) və sorğu gövdəsini (əgər varsa) göstərən HTTP sorğusu göndərir.
```
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  
```
Server tərəfindən sorğunun işlənməsi: Server sorğunu alır, işləyir (məsələn, server tərəfində skriptləri icra edir) və HTTP cavabını hazırlayır.
HTTP cavabının göndərilməsi: Server HTTP cavabını brauzerə geri göndərir. Cavab status kodunu (məsələn, 200 OK), başlıqları (Content-Type, Content-Length, Cache-Control və s.) və cavab gövdəsini (tələb olunan resursun məzmunu, məsələn, HTML faylı) ehtiva edir.
```
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-nin parsinqi və DOM-un qurulması: Brauzer HTML kodunu alır və onu parse edir, sənədin obyekt modelini (DOM - Document Object Model) yaddaşda yaradır. DOM HTML elementlərinin ağacını təmsil edir.
Resursların yüklənməsi və işlənməsi: HTML parse zamanı brauzer digər resurslara (CSS, JavaScript, şəkillər, şriftlər və s.) istinad edən linklərlə qarşılaşır. Hər resurs üçün addımlar 3-7 arasında təkrarlanır (IP axtarışı, TCP əlaqəsi, HTTP sorğusu/cavabı). Bu resursların yüklənməsi paralel şəkildə baş verə bilər (müvəqqəti əlaqələrin sayı ilə məhdudlaşdırılır).
CSSOM-un qurulması: Brauzer CSS fayllarını və HTML-də <style> bloklarını parse edir və CSS obyekt modelini (CSSOM) yaradır. CSSOM səhifədə tətbiq olunan stilləri təmsil edir.
Render Tree-nin qurulması: Brauzer DOM və CSSOM-u birləşdirərək render ağacını (Render Tree) qurur. Render Tree yalnız görünən elementləri və onların stillərini ehtiva edir. display: none olan elementlər daxil edilmir.
Layout (Reflow): Brauzer hər elementin dəqiq yerləşməsini və ölçüsünü hesablayır, əsasən Render Tree, baxış pəncərəsinin ölçüsü və stillər əsasında.
Painting (Repaint): Brauzer hər elementi ekran üzərində çəkir və onun yerləşməsini və stillərini tətbiq edir. Bu, qatlarda baş verir.
Composite: Brauzer çəkilmiş qatları birləşdirir və istifadəçinin ekranında göstərilən son görüntünü yaradır.
JavaScript-in icrası: Yükləmə və parse zamanı JavaScript kodu icra olunur. JavaScript-in icrası DOM və CSSOM-u təsir edə bilər və yenidən Layout və Painting addımlarını (Reflow/Repaint) çağırır.

Məzmunun göstərilməsinin əsas mərhələləri:

DOMContentLoaded: Bu hadisə, brauzer HTML sənədini tam yüklədikdə və parse etdikdə, DOM ağacını qurduqda baş verir, lakin stil cədvəllərinin, şəkillərin və alt çərçivələrin yüklənməsini gözləyir.
Load: Bu hadisə, bütün səhifə, o cümlədən şəkillər, skriptlər, stillər və digər resurslar tam yükləndikdə baş verir.