Պատմիր Critical Rendering Path-ի մասին — ինչ է տեղի ունենում ռենդերի ծառը կառուցելիս?

Կրիտիկական ռենդերինգի ճանապարհ (CRP) — դա քայլերի հաջորդականությունն է, որը բրաուզերը կատարում է վեբ էջը էկրանին ցուցադրելու համար:

Ռենդերային ծառը կառուցելիս տեղի է ունենում հետևյալը:

1. HTML-ի վերլուծություն — բրաուզերը կարդում է HTML-ը և կառուցում DOM ծառը (Փաստաթղթի օբյեկտի մոդել):
2. CSS-ի վերլուծություն — բրաուզերը բեռնում և վերլուծում է CSS-ը, կառուցում է CSSOM (CSS օբյեկտի մոդել):
3. Ռենդեր ծառի կառուցում — DOM և CSSOM միավորում է ռենդեր ծառի մեջ, որը պարունակում է միայն տեսանելի տարրերը և նրանց ոճերը:
4. Layout (Reflow) — յուրաքանչյուր տարրի ճշգրիտ չափերի և դիրքերի հաշվարկը:
5. Նկարագրում — պիքսելների նկարագրությունը էկրանին:

Մեծ կարևորություն ունի — բրաուզերը չի կարող սկսել ռենդերումը, մինչև որ կառուցի ռենդեր ծառը, այդ պատճառով CSS և սինխրոն սցենարները ձգձգում են ցուցադրությունը:

CRP-ի օպտիմալացումը ներառում է բլոկավորող ռեսուրսների նվազեցում, սցենարների ասինխրոն բեռնում, կարևոր CSS-ի ինլայնինգ՝ էջի առաջին ցուցադրությունը արագացնելու համար։