Kas yra kritinis kelias interneto puslapių atvaizdavimui?

Tai yra žingsnių seka, kurią naršyklė atlieka norėdama rodyti puslapio turinį ekrane, pradedant nuo HTML dokumento gavimo. Ji apima:

1. DOM (Dokumento objekto modelio) kūrimas: HTML kodo analizė ir objekto medžio, atstovaujančio dokumento struktūrą, sukūrimas.
2. CSSOM (CSS objekto modelio) kūrimas: CSS failų ir inline stilių analizė, siekiant sukurti objektų medį, kuris atstovauja elementų stilius.
3. Render medžio kūrimas: DOM ir CSSOM sujungimas. Sukuriamas medis tik su renderinamiems elementams taikomais stiliais.
4. Layout (arba Reflow): Kiekvieno elemento geometrinių matmenų ir pozicijos nustatymas puslapyje.
5. Paint (arba Repaint): Pikselių užpildymas ekrane, remiantis render medžiu ir išdėstymo duomenimis.

Kritinio render kelio optimizavimas siekia, kad naršyklė kuo greičiau parodytų pirmą prasmingą turinį (First Meaningful Paint) arba interaktyvumą (Time to Interactive). Tai pasiekiama minimalizuojant blokuojančius išteklius (JS ir CSS), optimizuojant išteklių dydį ir jų įkėlimą tinkamu metu.