IlmHamroh
JavaScript Full-stack/2-qism. Internet, veb va brauzer15/20-dars12 daqiqa
Mundarija (31)

Critical Rendering Path: HTML'dan pikselgacha

Qisqacha: Critical Rendering Path — brauzer HTML va CSS matnini ekrandagi piksellarga aylantiradigan bosqichlar zanjiri. Brauzer HTML'dan DOM daraxtini, CSS'dan CSSOM daraxtini quradi, ularni render tree'ga birlashtiradi. Keyin layout bosqichida har elementning o'lchami va joyini hisoblaydi, paint bosqichida bo'yaydi, composite bosqichida qatlamlarni yig'ib ekranga chiqaradi.

Bu darsda

  • Critical Rendering Path (CRP) bosqichlarini to'g'ri tartibda ayta olasiz.
  • Oddiy HTML uchun DOM daraxtini qog'ozda chiza olasiz.
  • CSSOM va render tree nima ekanini, qaysi elementlar render tree'ga kirmasligini tushuntirasiz.
  • Layout, paint va composite farqini ajratasiz.
  • "60 FPS" va "16.7 millisekund" nimani anglatishini hisoblab ko'rsata olasiz.

Oldin bilishingiz kerak: Brauzer tuzilishi va dvigatellar, XML va uning vorislari (teg va daraxt tushunchasi).

1. Nega bu kerak?

Oldingi darsda brauzerning "oshpazi" — rendering dvigateli bilan tanishdik. U HTML va CSS'dan ko'rinadigan sahifa tayyorlaydi. Bu darsda oshpazning retseptini — aynan qaysi qadamlar bilan ishlashini ko'ramiz.

Nega dasturchiga bu kerak? Ikki vaziyatni tasavvur qiling:

  • Sayt ochilyapti, lekin 3 soniya oq ekran turibdi. Fayllar allaqachon kelgan — brauzer nima qilyapti?
  • Sahifani pastga aylantirsangiz, u silliq emas, "titrab" harakatlanadi.

Ikkala muammoning sababi — shu bosqichlardan birida. Qaysi bosqich qancha "turishini" bilsangiz, sababni topasiz.

O'xshatish uchun uy qurilishini olamiz. Avval xonalar rejasi chiziladi, dizayner ranglarni tanlaydi. Keyin ikkalasi birlashtirilib ish rejasi tuziladi. So'ng har devor o'lchanadi, bo'yaladi va oxirida hammasi joyiga yig'iladi. Brauzer ham xuddi shunday ketma-ketlikda ishlaydi.

2. Umumiy xarita

Critical Rendering Path (CRP) — so'zma-so'z "chizishning muhim yo'li". Bu — brauzer birinchi kadrni ekranga chiqarishi uchun albatta bosib o'tadigan qadamlar. Ular butun zanjir bo'lib ishlaydi:

flowchart TD
  A["HTML matni"] --> B["DOM daraxti"]
  C["CSS matni"] --> D["CSSOM daraxti"]
  B --> E["Render tree"]
  D --> E
  E --> F["Layout: o'lcham va joy"]
  F --> G["Paint: piksellarni bo'yash"]
  G --> H["Composite: qatlamlarni yig'ish"]
  H --> I["Ekrandagi sahifa"]

Uy o'xshatishida:

Bosqich Nima bo'ladi Uy qurilishida
DOM HTML'dan elementlar daraxti Xonalar rejasi
CSSOM CSS'dan uslublar daraxti Dizayner ko'rsatmalari
Render tree Ko'rinadigan elementlar + uslublar Ish rejasi
Layout Har elementning o'lchami va joyi Devorlarni o'lchash
Paint Piksellarni bo'yash Bo'yash
Composite Qatlamlarni ekranga yig'ish Tayyor qismlarni yig'ish

Keling, har bir bosqichni alohida ko'ramiz.

3. DOM: HTML'dan daraxtgacha

3.1 Kichkina HTML sahifa

Choyxona menyusining eng oddiy sahifasi:

html
<html>
  <head>
    <title>Choyxona</title>
  </head>
  <body>
    <h1>Menyu</h1>
    <p>Osh — 45 000 so'm</p>
  </body>
</html>

XML darsida ko'rgan teglar tanishmi? HTML ham teglardan iborat. Har bir qator:

  • <html> — butun sahifani o'rab turgan eng tashqi teg.
  • <head> — sahifa haqidagi ma'lumotlar. Uning ichidagisi ekranda ko'rinmaydi.
  • <title> — tabda yoziladigan sahifa nomi.
  • <body> — ekranda ko'rinadigan hamma narsa shu yerda.
  • <h1> — katta sarlavha.
  • <p> — oddiy matn bo'lagi (paragraf).

HTML'ni 04-qismda to'liq o'rganamiz. Hozir shu olti teg yetarli.

3.2 Baytlardan tugunlargacha

Server brauzerga shu matnni baytlar ko'rinishida yuboradi. Brauzer uni daraxtga aylantirguncha to'rt qadam bosadi:

  1. Baytlar → belgilar. 3C 68 31 3E kabi baytlar UTF-8 jadvali bo'yicha harflarga aylanadi: <h1>.
  2. Belgilar → tokenlar. Token — ma'noli bo'lak. Brauzer matnni "boshlanish tegi h1", "matn Menyu", "yopilish tegi h1" kabi bo'laklarga ajratadi.
  3. Tokenlar → tugunlar. Tugun (node) — daraxtdagi bitta element yoki matn. Har bir token xotirada alohida tugunga aylanadi.
  4. Tugunlar → DOM. Tugunlar "kim kimning ichida" bo'yicha bog'lanib, daraxt hosil qiladi.

Bu jarayonning umumiy nomi — tahlil qilish (parsing): matnni o'qib, uning tuzilmasini tushunish.

3.3 DOM daraxti

DOM (Document Object Model) — sahifaning brauzer xotirasidagi daraxt ko'rinishi. Bizning sahifamiz uchun u shunday:

text
html
 ├── head
 │    └── title
 │         └── "Choyxona"
 └── body
      ├── h1
      │    └── "Menyu"
      └── p
           └── "Osh — 45 000 so'm"

Bu fayl tizimidagi papkalar daraxtiga o'xshaydi. html — eng katta papka, head va body — uning ichidagi papkalar. Matnlar ham alohida tugun bo'lib turadi.

Nega DOM kerak? Brauzer matn bilan emas, daraxt bilan ishlash qulayroq. Keyinroq JavaScript ham sahifani aynan shu daraxt orqali o'zgartiradi — buni DOM daraxti darsida ko'rasiz.

Maslahat: Brauzer HTML faylni oxirigacha kutmaydi. Fayl qismma-qism kelayotgan paytda ham tahlil qilib, daraxtni o'stirib boradi. Shuning uchun uzun sahifaning yuqori qismi ba'zan pastki qismidan oldin ko'rinadi.

Tekshirib ko'ring: Yuqoridagi daraxtda p tugunining "otasi" qaysi tugun? h1 va p bir-biriga kim bo'ladi?

Javob

p ning otasi — body, chunki p teg body ichida yozilgan. h1 va p — aka-uka (bir otaning bolalari): ikkalasi ham to'g'ridan-to'g'ri body ichida turadi.

4. CSSOM: uslublar daraxti

4.1 Kichkina CSS

Endi sahifaga uslub beramiz:

css
body { font-size: 16px; }
h1 { color: green; }
p { color: gray; }

Har bir qator — bitta qoida:

  • Qavsdan oldingi so'z (body, h1, p) — qoida qaysi elementga tegishli ekani.
  • Qavs ichida — xususiyat: qiymat;. Masalan, color: green — "matn rangi yashil".
  • font-size: 16px — shrift o'lchami 16 piksel.

CSS'ni 05-qismda batafsil o'rganamiz.

4.2 CSSOM qanday quriladi

CSSOM (CSS Object Model) — CSS qoidalarining brauzer xotirasidagi daraxti. Brauzer uni ham DOM kabi quradi: baytlar → belgilar → tokenlar → tugunlar.

CSSOM'da muhim bir narsa hisoblanadi — meros. body ga berilgan font-size: 16px uning ichidagi h1 va p ga ham o'tadi. Xuddi familiya otadan bolalarga o'tgani kabi.

4.3 CSSOM ni oxirigacha kutish shart

HTML'ni brauzer qismma-qism chizishi mumkin. CSS bilan esa bunday qilolmaydi. Nega?

Faylning oxiridagi qoida boshidagini bekor qilishi mumkin:

css
h1 { color: green; }
h1 { color: red; }

Ikkinchi qoida birinchisini "yengadi" — sarlavha qizil bo'ladi. Brauzer CSS'ning yarmini o'qib chizsa, sarlavha avval yashil, keyin qizil bo'lib "sakrardi". Shuning uchun brauzer CSSOM to'liq tayyor bo'lguncha sahifani chizmaydi. Bu keyingi darsning asosiy mavzusi — render-blocking CSS.

5. Render tree: faqat ko'rinadigan elementlar

DOM sahifadagi hamma elementni biladi. CSSOM hamma uslubni biladi. Brauzer ikkalasini birlashtirib, render tree (chizish daraxti) quradi. Unda faqat ekranda ko'rinadigan elementlar va ularning yakuniy uslublari bo'ladi.

Render tree'ga kirmaydiganlar:

  • <head>, <title> va head ichidagi boshqa teglar — ular ekranda ko'rinmaydi.
  • display: none berilgan element — bu CSS "elementni umuman ko'rsatma, joy ham ajratma" degani.

Bu yerda boshlovchilar ko'p adashadi. Elementni yashirishning uch usulini solishtiring:

CSS Ko'rinadimi Joy egallaydimi Render tree'dami
display: none Yo'q Yo'q Yo'q
visibility: hidden Yo'q Ha Ha
opacity: 0 Yo'q (shaffof) Ha Ha

visibility: hidden va opacity: 0 elementni ko'rinmas qiladi, lekin uning joyi bo'sh qoladi. Brauzer bu joyni hisoblashi kerak — shuning uchun ular render tree'da qoladi.

O'xshatish: kinoteatrda bo'sh o'rindiq ham o'rindiq — uni sanashadi. display: none esa o'rindiqni zaldan butunlay olib chiqib ketish.

Tekshirib ko'ring: Nima uchun opacity: 0 berilgan element render tree'da qoladi, display: none esa qolmaydi?

Javob

opacity: 0 elementni shaffof qiladi, lekin u sahifada joy egallashda davom etadi. Brauzer uning o'lchami va joyini hisoblashi shart. display: none esa elementni joyi bilan birga olib tashlaydi — hisoblaydigan narsa qolmaydi.

6. Layout: o'lcham va joyni hisoblash

Render tree tayyor. Lekin brauzer hali har element qayerda va qancha katta ekanini bilmaydi. Buni layout (joylashtirish) bosqichi hisoblaydi. Firefox'da bu bosqich reflow deb ataladi — ikkalasi bir narsa.

Layout viewport ga bog'liq. Viewport — brauzer oynasining sahifa ko'rinadigan qismi. Kompyuterda u keng, telefonda tor.

Misol: elementga width: 50% (kengligi yarmi) berilgan.

  • 1200 piksellik kompyuter oynasida: 1200 ÷ 2 = 600 piksel.
  • 390 piksellik telefon ekranida: 390 ÷ 2 = 195 piksel.

Brauzer shunday hisob-kitobni har bir element uchun qiladi: kengligi, balandligi, ekrandagi x va y koordinatasi. Natija — sahifaning aniq chizmasi, xuddi quruvchining o'lchov qog'ozi.

Layout og'ir ish, chunki elementlar bir-biriga bog'liq. Tepadagi sarlavha bir qator uzaysa, uning ostidagi hamma narsa pastga suriladi va qayta hisoblanadi.

7. Paint va composite

7.1 Paint: bo'yash

Chizma tayyor bo'lgach, paint (bo'yash) bosqichi keladi. Brauzer har bir elementni piksellarga aylantiradi:

  • matn harflari tanlangan shrift va rangda;
  • fon ranglari va rasmlar;
  • chegaralar (border) va soyalar.

Aniqrog'i, bu ikki qadam: avval "nima, qaysi tartibda chiziladi" ro'yxati tuziladi, keyin shu ro'yxat bo'yicha piksellar to'ldiriladi. Ikkinchi qadam rasterizatsiya deb ataladi.

7.2 Qatlamlar

Murakkab sahifalarni brauzer bitta rasm qilib emas, bir nechta qatlam (layer) qilib bo'yaydi. O'xshatish: shaffof plyonkalar. Birida fon, ikkinchisida matn, uchinchisida doimo tepada turadigan menyu.

Qatlamlarning foydasi: bittasi o'zgarsa, faqat o'shani qayta bo'yash kifoya. Qolganlari tayyor turadi.

7.3 Composite: yig'ish

Composite (yig'ish) bosqichida tayyor qatlamlar to'g'ri tartibda ustma-ust qo'yiladi va ekranga chiqariladi. Bu ishni ko'pincha videokarta (GPU) bajaradi — u rasmlarni tez birlashtirishga ixtisoslashgan.

Sahifani aylantirganda (scroll) brauzer ko'pincha hech narsani qayta bo'yamaydi. U faqat tayyor qatlamlarni suradi. Bu ishni oldingi darsda tilga olingan kompozitor oqimi bajaradi — asosiy oqim JavaScript bilan band bo'lsa ham. Shuning uchun yaxshi yozilgan sahifada scroll silliq bo'ladi.

Tekshirib ko'ring: Layout va paint'ning farqini bir gap bilan ayting.

Javob

Layout — elementning qayerda va qancha katta bo'lishini hisoblaydi (geometriya). Paint — shu joyni rang, matn va rasmlar bilan bo'yaydi (ko'rinish).

8. 60 FPS va kadr byudjeti

8.1 Kadr nima?

Daftar burchagiga har sahifada biroz o'zgargan rasm chizib, varaqlarni tez aylantirsangiz, rasm "jonlanadi". Har bir sahifa — kadr (frame).

Ekran ham shunday ishlaydi. Oddiy monitor soniyasiga 60 marta yangilanadi — 60 FPS (frames per second, soniyadagi kadrlar). Animatsiya va scroll silliq ko'rinishi uchun brauzer har yangilanishga yangi kadr tayyorlab ulgurishi kerak.

8.2 Hisob-kitob

Bir soniya — 1000 millisekund. Uni 60 kadrga bo'lamiz:

text
1000 ms ÷ 60 kadr ≈ 16.7 ms

Demak, brauzerda har kadrni tayyorlashga taxminan 16.7 millisekund bor. Bu vaqtga JavaScript, uslub hisobi, layout, paint va composite — hammasi sig'ishi kerak.

Brauzerning o'z ishlari ham bor. Shuning uchun amalda sizning kodingizga kadr ichida taxminan 10 ms qoladi. Zamonaviy telefonlarda ekran 120 Hz bo'lsa, byudjet ikki barobar qisqa: 1000 ÷ 120 ≈ 8.3 ms.

Kadr ulgurmasa, u tushib qoladi. Foydalanuvchi buni "qotish" yoki "titrash" deb sezadi.

9. Ko'p uchraydigan xatolar

9.1 display: none va visibility: hidden ni bir xil deb o'ylash

Nega xato: ikkalasi ham elementni ko'rinmas qiladi, lekin visibility: hidden joyni saqlab qoladi. Sahifada tushunarsiz bo'sh joy paydo bo'ladi.

Tuzatish: element joyi bilan yo'qolishi kerak bo'lsa — display: none. Joyi qolishi kerak bo'lsa — visibility: hidden.

9.2 DOM'ni HTML faylning o'zi deb o'ylash

Nega xato: brauzer HTML'dagi xatolarni o'zi tuzatadi. Masalan, yopilmagan tegni yopib qo'yadi. XML darsida aytganimizdek, HTML kechirimli. Keyinroq JavaScript ham DOM'ni o'zgartiradi.

Tuzatish: DOM — brauzer HTML asosida qurgan tirik daraxt, fayl emas. Uni DevTools'ning Elements panelida ko'rasiz va u fayldan farq qilishi mumkin.

9.3 Juda katta DOM

Nega xato: sahifada minglab teg bo'lsa, layout va paint ko'p vaqt oladi, ayniqsa kuchsiz telefonlarda. Google'ning tekshiruv vositasi Lighthouse bu haqda "Optimize DOM size" ("DOM hajmini kamaytiring") ogohlantirishini beradi.

Tuzatish: keraksiz o'rovchi teglarni olib tashlang. Uzun ro'yxatlarni sahifalarga bo'ling. Lighthouse bilan DevTools II darsida ishlaymiz.

10. Mashqlar

1-mashq (oson): Render tree'ga kiradimi?

Quyidagi elementlardan qaysilari render tree'ga kiradi?

  1. <title>Mening saytim</title>
  2. <p style="display: none;">Salom</p>
  3. <p style="opacity: 0;">Dunyo</p>
  4. <p style="visibility: hidden;">Toshkent</p>

style="..." — CSS qoidasini to'g'ridan-to'g'ri tegning ichiga yozish usuli.

Yechim
  1. Kirmaydi — title head ichida, ekranda sahifa sifatida ko'rinmaydi.
  2. Kirmaydi — display: none elementni joyi bilan olib tashlaydi.
  3. Kiradi — shaffof, lekin joy egallaydi.
  4. Kiradi — ko'rinmas, lekin joyi saqlanadi.

2-mashq (o'rta): DOM daraxtini chizing

Quyidagi HTML uchun DOM daraxtini daftaringizda chizing (matn tugunlarini ham):

html
<html>
  <body>
    <h1>Taksi narxlari</h1>
    <p>Kunduzi: 8 000 so'm</p>
    <p>Kechasi: 12 000 so'm</p>
  </body>
</html>
Yechim
text
html
 └── body
      ├── h1
      │    └── "Taksi narxlari"
      ├── p
      │    └── "Kunduzi: 8 000 so'm"
      └── p
           └── "Kechasi: 12 000 so'm"

head yozilmagan bo'lsa ham, brauzer DOM'ga bo'sh head ni o'zi qo'shib qo'yadi — HTML kechirimli.

3-mashq (qiyin): Kadr byudjeti va Paint flashing

  1. Monitoringiz 90 Hz va 144 Hz bo'lsa, har kadrga necha millisekund qoladi? Ishora: 1000 ni kadrlar soniga bo'ling.
  2. Nega yuqori chastotali ekranda silliq animatsiya qilish qiyinroq?
  3. Kuzatuv: Chrome'da istalgan saytni oching va F12 ni bosing — DevTools ochiladi (uni DevTools I darsida to'liq o'rganamiz). DevTools'ning o'ng yuqorisidagi ⋮ → More tools → Rendering ni tanlang. Pastda ochilgan oynada Paint flashing katagini belgilang. Sahifani aylantiring va biror tugma ustiga sichqonchani olib boring.
Yechim
  1. 90 Hz: 1000 ÷ 90 ≈ 11.1 ms. 144 Hz: 1000 ÷ 144 ≈ 6.9 ms.
  2. Kadr byudjeti qisqaradi. Xuddi shu ish 16.7 ms ga sig'sa ham, 6.9 ms ga sig'masligi mumkin. Unda kadrlar tushib qoladi.
  3. Qayta bo'yalayotgan joylar bir lahza yashil rangda miltillaydi. Tugma ustiga kelganda rangi o'zgarsa, faqat tugma atrofi yashil bo'ladi — brauzer butun sahifani emas, faqat o'zgargan qismni qayta bo'yaydi.

11. Real ishda

  • Google va tezlik. Google sayt tezligini Core Web Vitals ko'rsatkichlari bilan o'lchaydi va qidiruvda hisobga oladi. Masalan, LCP — eng katta element qancha vaqtda chizilgani. Bu ko'rsatkichlar bevosita CRP bilan bog'liq. Ularni Performance API va Core Web Vitals darsida o'rganamiz.
  • Animatsiya va tezlik. Frontend dasturchi animatsiya yozganda qaysi bosqich qayta ishlashini o'ylaydi. Bu Rendering pipeline va animatsiya darsining mavzusi.
  • Intervyu savoli: "Critical Rendering Path nima?", "display: none va visibility: hidden farqi?", "Reflow nima?" — frontend intervyularining klassik savollari.

Xulosa

  • Critical Rendering Path: HTML → DOM, CSS → CSSOM → render tree → layout → paint → composite.
  • DOM — sahifaning xotiradagi daraxti. U HTML fayl qismma-qism kelayotganda ham quriladi.
  • CSSOM to'liq tayyor bo'lmaguncha brauzer sahifani chizmaydi.
  • Render tree'da faqat ko'rinadigan elementlar bor: head va display: none kirmaydi.
  • Layout — o'lcham va joy, paint — bo'yash, composite — qatlamlarni GPU yordamida yig'ish.
  • 60 FPS uchun har kadrga taxminan 16.7 ms bor.

Manbalar

Keyingi dars: Renderni nima to'xtatadi: bloklovchi resurslar va reflow — CSS va JavaScript fayllari bu zanjirni qanday to'xtatib qo'yishini va sahifa o'zgarganda qaysi bosqichlar qayta ishlashini ko'ramiz.

Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
Critical Rendering Path: HTML'dan pikselgacha — IlmHamroh