Brauzer veb-sahifani qanday ishlaydi?

Veb-sahifa brauzer tomonidan ishlov berish jarayoni bir nechta bosqichlarga bo‘linishi mumkin:

1. So‘rov va resursni olish:

   • Foydalanuvchi URL-ni manzil satriga yozadi yoki havolaga bosadi.
   • Brauzer serverga HTTP so‘rov yuboradi.
   • Server so‘rovni qayta ishlaydi va odatda HTML hujjatni o‘z ichiga olgan javob yuboradi.

2. Sintaktik tahlil (Parsing):

   • Brauzer HTML hujjatini baytlar shaklida oladi.
   • Bu baytlar belgilangan kodlash bo‘yicha belgilar shaklida dekodlanadi.
   • HTML parser hujjatni har bir belgi bo‘yicha tahlil qiladi va DOM (Document Object Model) daraxtini quradi. DOM hujjatning mantiqiy tuzilmasini ifodalaydi.
   • <link> (CSS uchun) yoki <script> (JavaScript uchun) teglarini aniqlaganida, brauzer bu resurslarni HTML tahlili bilan parallel ravishda yuklay boshlaydi.

3. CSSOM qurilishi:

   • CSS parser <style>, <link> va inline uslublardan CSS qoidalarini tahlil qiladi.
   • Ushbu qoidalarga asoslanib, har bir element uchun barcha uslublarni o‘z ichiga olgan CSSOM (CSS Object Model) daraxti quriladi.

4. Render daraxtini qurish:

   • Render daraxt DOM va CSSOM ni birlashtiradi. U faqat sahifada ko‘rsatiladigan elementlar va ularning uslublarini o‘z ichiga oladi.
   • display: none; CSS qoidasi bilan belgilangan elementlar Render daraxtiga kiritilmaydi.

5. Joylashuv (Layout / Reflow):

   • Brauzer Render daraxt asosida har bir elementning aniq geometrik o‘lchamlari va joylashuvini hisoblaydi. Bu jarayon Layout yoki Reflow deb ataladi.
   • Layout birinchi marta Render daraxti qurilayotganida va oynaning o‘lchami o‘zgarganda, elementlar qo‘shilganda yoki o‘chirilib, ularning uslublari o‘zgarganda amalga oshiriladi.

6. Chizish (Painting / Repaint):

   • Brauzer har bir elementni ekranga chizadi, Render daraxti va Layout natijalari asosida.
   • Elementning ko‘rinadigan xususiyatlari, masalan, rang, fon, shaffoflik o‘zgarganda, bu Repaint deb ataladigan jarayon bilan amalga oshadi.

7. Kompazitsiya:

   • Chizilgan elementlar optimizatsiya uchun turli qatlamlarga bo‘linishi mumkin.
   • Bu qatlamlar keyinchalik ekran uchun yakuniy sahifani birlashtirish uchun birga ishlatiladi.

8. Skriptlarni bajarish:

   • HTML parser <script> tegiga duch kelganda, HTML parsing jarayoni to‘xtatiladi (standart holatda), va brauzer JavaScript kodini yuklab, tahlil qilib, bajaradi.
   • JavaScript DOM va CSSOM ni o‘zgartirishi mumkin, bu esa takroriy Layout va Painting bosqichlarini chaqirishi mumkin.
   • <script> tegidagi async va defer atributlari skriptlarning bajarilish tartibi va vaqtiga ta'sir qiladi, HTML parsing davom etishini imkon beradi.

Quyida bu jarayonning taxminiy vizualizatsiyasi keltirilgan:

HTTP So‘rovi
↓
HTML Baytlar
↓
HTML Parser
→ CSS Parser (parallel)
    ↓           ↓
    DOM Daraxti  CSSOM Daraxti
          ↓
     Render Daraxti
          ↓
        Layout
          ↓
       Chizish
          ↓
     Kompozitsiya
          ↓
   Ekranga chiqarish

JavaScript bajarilishi turli bosqichlarda to‘xtab, takroriy bosqichlarga olib kelishi mumkin:

HTML Parser + `<script>` teg
↓
HTML parsing to‘xtatiladi
↓
Script yuklab olinadi
↓
Script tahlil qilinadi
↓
Script bajariladi
↓
(DOM/CSSOM o‘zgartirilishi mumkin → Layout/Chizish chaqiriladi)
↓
HTML parsing davom etadi

Ushbu jarayonni tushunish, veb-sahifalarning ishlash samaradorligini oshirish uchun muhimdir.