Brauzer veb səhifəsini necə işləyir?

Veb səhifəsinin brauzer tərəfindən emalı prosesi bir neçə mərhələyə bölünə bilər:

1. Sorğu və resursun alınması:

   • İstifadəçi URL-i ünvan sətrinə daxil edir və ya linkə klikləyir.
   • Brauzer serverə HTTP sorğusu göndərir.
   • Server sorğunu emal edir və adətən HTML sənədi olan cavab göndərir.

2. Sintaktik analiz (Parsing):

   • Brauzer HTML sənədini baytlar şəklində alır.
   • Bu baytlar göstərilən kodlama ilə simvollara çevrilir.
   • HTML parser sənədi hərflə-əhval ilə analiz edir və DOM (Document Object Model) ağacını qurur. DOM sənədin məntiqi quruluşunu təmsil edir.
   • <link> (CSS üçün) və ya <script> (JavaScript üçün) teqlərini tapanda, brauzer bu resursların yüklənməsini HTML parsing ilə paralel olaraq başlayır.

3. CSSOM-un qurulması:

   • CSS parser <style> teqlərindən, <link> teqlərindən və inline stillərdən CSS qaydalarını analiz edir.
   • Bu qaydalara əsasən CSS Object Model (CSSOM) ağacı qurulur, bu da səhifədəki hər element üçün bütün stilləri ehtiva edir.

4. Render Tree-nin qurulması:

   • Render Tree DOM və CSSOM-u birləşdirir. Bu, yalnız səhifədə göstəriləcək elementləri və onlara aid stilləri ehtiva edir.
   • display: none; CSS qaydası ilə təyin olunmuş elementlər Render Tree-ə daxil edilmir.

5. Layout (Reflow):

   • Brauzer Render Tree-ə əsaslanaraq hər elementin dəqiq ölçülərini və mövqeyini hesablayır. Bu proses Layout və ya Reflow adlanır.
   • Layout ilk Render Tree qurulduqda və ya pəncərə ölçüsü dəyişdikdə, elementlər əlavə və ya silindikdə və ya stillər dəyişdikdə baş verir.

6. Rəsm (Painting / Repaint):

   • Brauzer hər elementi ekranda rəssamlıq edir, Render Tree və Layout mərhələsinin nəticələrindən istifadə edərək.
   • Rəssamlıq elementin görünən xüsusiyyətləri dəyişdikdə, məsələn, rəng, fon, şəffaflıq, və ya onun geometriyası dəyişmədən (Repaint adlanır), baş verə bilər.

7. Kompozisiya:

   • Rənglənən elementlər müxtəlif qatlarda birləşdirilə bilər ki, bu da render və animasiyanı optimallaşdırır.
   • Bu qatlar sonra ekran üzərində son səhifənin göstərilməsi üçün birləşdirilir.

8. Skriptlərin icrası:

   • HTML parser <script> teqinə çatanda, HTML parsing dayandırılır (əksər hallarda), və brauzer JavaScript kodunu yükləyir, parser edir və icra edir.
   • JavaScript DOM və CSSOM-u dəyişə bilər, bu da yenidən Layout və Rəssamlıq mərhələlərini çağırır.
   • <script> teqi üçün async və defer atributları skriptlərin icra olunma ardıcıllığını və vaxtını təsir edir, HTML parsing-ə davam etməyə imkan verir.

Aşağıda bu axının təxmini vizuallaşdırması verilmişdir:

HTTP Sorğusu
↓
HTML Baytları
↓
HTML Parser
→ CSS Parser (Paralel)
    ↓           ↓
    DOM Ağacı  CSSOM Ağacı
          ↓
     Render Ağacı
          ↓
        Layout
          ↓
       Rəssamlıq
          ↓
     Kompozisiya
          ↓
   Ekran Göstərilməsi

JavaScript-in icrası müxtəlif mərhələlərdə daxil ola bilər və yenidən mərhələləri çağırır:

HTML Parser + Script teqi
↓
HTML Parsing dayandırılır
↓
Script yüklənir
↓
Script parser edilir
↓
Script icra edilir
↓
(Dəyişikliklər DOM/CSSOM-u → Layout/Rəssamlıq çağırır)
↓
HTML parsing-ə davam edilir

Bu prosesin anlaşılması veb səhifələrin performansını optimallaşdırmaq üçün vacibdir.