Veb-sahifa renderingining kritik yo'li nima?

Kritik rendering yo'li (Critical Rendering Path - CRP) brauzer HTML, CSS va JavaScript-ni ekraningizda ko'rinadigan piksellarga aylantirish uchun bajaradigan qadamlar ketma-ketligidir. CRP-ni optimallashtirish, mazmunni chizish tezligini oshirish va sahifa interaktiv bo'lish vaqtini yaxshilash imkonini beradi.

CRP ning asosiy bosqichlari:

DOM (Document Object Model) qurilishi: Brauzer HTML kodini tahlil qiladi va sahifa mazmunini ifodalovchi daraxt tuzilmasini yaratadi.
CSSOM (CSS Object Model) qurilishi: Brauzer CSS qoidalarini ( <style> teglaridan yoki tashqi CSS fayllaridan) tahlil qiladi va har bir DOM element uchun uslublarni ifodalovchi daraxt tuzilmasini yaratadi. CSS, render qilish uchun to'siq bo'ladigan resursdir, chunki brauzer uslublar haqida ma'lumot olmadan render daraxtini tuya olmaydi.
Render daraxti qurilishi: DOM (faqat ko'rinadigan tugunlar) va CSSOM ning birlashishi. Bu daraxt sahifadagi barcha ko'rinadigan elementlar va ularning tayyor uslublarini o'z ichiga oladi.
Layout (Joylashish yoki Hisoblash): Brauzer har bir elementning aniq joylashuvi va o'lchamini hisoblaydi.
Paint (Chizish): Brauzer har bir render daraxti elementini ekran uchun haqiqiy piksellarga aylantiradi.
Composite (Kombinatsiya): Brauzer chizilgan qatlamlarni yakuniy tasvirga birlashtiradi.

CSS va <head> ichidagi sinxron JavaScript kabi render qilishni to'xtatuvchi resurslar, CRP qurilish vaqtini oshiradi. CRP ni optimallashtirish, to'siqchi resurslarni minimallashtirish yoki asinxron yuklash va muhim kontentni ("qoplama chizig'i" ustida) prioritetlashni o'z ichiga oladi.