Ի՞նչ է վեբ էջերի ռենդերի կարևոր ուղին։

Կրիտիկական ռենդերինգի ճանապարհ (Critical Rendering Path - CRP) այն քայլերի հաջորդականությունն է, որը բրաուզերը կատարում է HTML, CSS և JavaScript- ը վերածելու համար էկրանին ցուցադրվող պիքսելների: CRP-ի օպտիմալացումը հնարավորություն է տալիս արագացնել բովանդակության նկարչությունը և բարելավել էջի ինտերակտիվության ժամանակը:

CRP-ի հիմնական փուլերը՝

DOM (Document Object Model) կառուցում: Բրաուզերը վերլուծում է HTML կոդը և ստեղծում ծառային կառուցվածք, որը ներկայացնում է էջի բովանդակությունը:
CSSOM (CSS Object Model) կառուցում: Բրաուզերը վերլուծում է CSS կանոնները ( <style> տեգերից կամ արտաքին CSS ֆայլերից) և ստեղծում ծառային կառուցվածք, որը ներկայացնում է յուրաքանչյուր DOM տարրին վերաբերող ոճերը: CSS-ը բլոկավոր ռեսուրս է, քանի որ բրաուզերը առանց ոճերի մասին տեղեկությունների չի կարող կառուցել ռենդերային ծառը:
Render ծառի կառուցում: DOM (միայն տեսանելի հանգույցներ) և CSSOM-ի միավորումը: Այս ծառը պարունակում է բոլոր տեսանելի տարրերը և նրանց պատրաստի ոճերը:
Layout (Տեղադրման կամ հաշվարկի): Բրաուզերը հաշվարկում է յուրաքանչյուր տարրի ճշգրիտ դիրքը և չափերը:
Paint (Նկարչություն): Բրաուզերը յուրաքանչյուր render ծառի տարրն վերածում է իրական պիքսելների էկրանին:
Composite (Կոմպոզիցիա): Բրաուզերը միավորում է նկարված շերտերը վերջնական պատկերում:

Ռեսուրսները, որոնք խոչընդոտում են ռենդերինգին (օրինակ՝ CSS և սինխրոն JavaScript <head>-ում), ավելացնում են CRP-ի կառուցման ժամանակը: CRP-ի օպտիմալացումը ներառում է խոչընդոտող ռեսուրսների նվազեցումը կամ ասինխրոն բեռնումը, ինչպես նաև կարևոր բովանդակության բեռնումը առաջնահերթ դարձնելը ("շերտի գիծ" վերևում):