Браузер чӣ гуна вебсаҳифаро коркард мекунад?

Процеси обработки веб-страницы браузер метавонад ба чанд марҳила тақсим шавад:

1. Пурсиш ва гирифтани манбаъ:

   • Корбар URL-ро дар сатрии суроға ворид мекунад ё ба пайванд клик мекунад.
   • Браузер HTTP-пурсишро ба сервер мефиристад.
   • Сервер пурсишро коркард мекунад ва ҷавоб, одатан ҳуҷҷати HTML, мефиристад.

2. Таҳлили синтаксисӣ (Parsing):

   • Браузер ҳуҷҷати HTML-ро ба шакли байт мегирад.
   • Ин байтҳо мувофиқи кодикунии нишоншуда ба аломатҳо декод мешаванд.
   • Парсери HTML ҳуҷҷатро ҳарф ба ҳарф таҳлил мекунад ва дарахти DOM (Document Object Model)-ро месозад. DOM сохтори мантиқии ҳуҷҷатро намояндагӣ мекунад.
   • Вақте ки теги <link> (барои CSS) ё <script> (барои JavaScript) пайдо мешаванд, браузер ин манбаъҳоро параллелӣ бо таҳлили HTML боргирӣ мекунад.

3. Тамоссозии CSSOM:

   • Парсери CSS қоидаҳои CSS-ро аз <style> тегҳо, <link> тегҳо ва стилҳои inline таҳлил мекунад.
   • Бар асоси ин қоидаҳо, дарахти CSSOM (CSS Object Model) сохта мешавад, ки ҳамаи услубҳоро барои ҳар як унсури саҳифа дар бар мегирад.

4. Тамоссозии дарахти рендеринг (Render Tree):

   • Render Tree DOM ва CSSOM-ро мепайвандад. Он танҳо унсурҳое, ки дар саҳифа намоиш дода мешаванд, ва услубҳои онҳоро дорад.
   • Унсурҳое, ки қоидаи CSS display: none; доранд, дар Render Tree дохил намешаванд.

5. Тарҳрезӣ (Layout / Reflow):

   • Браузер андозаи дақиқи геометриро ва ҷойгиршавии ҳар як унсурро дар асоси Render Tree ҳисоб мекунад. Ин раванд Layout ё Reflow ном дорад.
   • Layout дар аввалин бор сохтани Render Tree, ва инчунин вақте ки андозаи тиреза тағйир меёбад, илова ё хориҷ кардани унсурҳо ё тағйир додани услубҳо, иҷро мешавад.

6. Рисориш (Painting / Repaint):

   • Браузер ҳар унсурро дар экран бо истифода аз маълумоти Render Tree ва натиҷаҳои қадами Layout мекашад.
   • Рисориш инчунин метавонад вақте ки хусусиятҳои намоён, мисли ранг, фон, шаффофият, тағйир меёбанд, ба амал ояд, бидуни тағйир додани геометрия (ин Repaint ном дорад).

7. Композиция:

   • Унсурҳои рангкардашударо метавон дар қабатҳои гуногун барои оптимизатсияи раванди рангкашӣ ва анимацияҳо муттаҳид кард.
   • Ин қабатҳо дар ниҳояти кор барои намоиши саҳифаи ниҳоӣ дар экран муттаҳид мешаванд.

8. Иҷрои скриптҳо:

   • Вақте ки HTML парсер ба теги <script> мерасад, таҳлили HTML муваққатан боздошта мешавад (ба таври стандартӣ), ва браузер JavaScript-ро боргирӣ, таҳлил ва иҷро мекунад.
   • JavaScript метавонад DOM ва CSSOM-ро тағйир диҳад, ки метавонад қадамҳои Layout ва Painting-ро такрор кунад.
   • Атрибутҳои async ва defer барои теги <script> ба тартиб ва вақти иҷрои скриптҳо таъсир мерасонанд, ва имкон медиҳанд, ки таҳлили HTML идома ёбад.

Ин аст тасвире тақрибан дар бораи ҷараён:

HTTP Пурсиш
↓
HTML байтҳо
↓
HTML parser
→ CSS parser (параллел)
    ↓           ↓
    DOM дарахт  CSSOM дарахт
          ↓
     Render дарахт
          ↓
        Layout
          ↓
       Рангкашӣ
          ↓
     Компониг
          ↓
   Экран

Иҷрои JavaScript метавонад дар марҳилаҳои гуногун боздошта шавад ва қадамҳоро такрор кунад:

HTML parser + `<script>` теги
↓
Паузаи таҳлили HTML
↓
Боргирии скрипт
↓
Таҳлили скрипт
↓
Иҷрои скрипт
↓
(Мумкин тағйир додани DOM/CSSOM → Тақвият додани Layout/Repaint)
↓
Идома додани таҳлили HTML

Фаҳмидани ин раванд барои оптимизатсияи иҷрои вебсайтҳо муҳим аст.