Ce este calea critică de redare a paginilor web?

Aceasta este o secvență de pași pe care browserul îi efectuează pentru a afișa conținutul paginii pe ecran, începând cu preluarea documentului HTML. Include:

1. Construirea DOM (Modelul Obiect al Documentului): Analiza codului HTML și crearea unui arbore de obiecte care reprezintă structura documentului.
2. Construirea CSSOM (Modelul Obiect CSS): Analiza fișierelor CSS și a stilurilor inline pentru crearea unui arbore de obiecte care reprezintă stilurile elementelor.
3. Construirea arborelui de randare: Combinarea DOM și CSSOM. Se creează un arbore doar cu elementele care trebuie randate, cu stilurile aplicate.
4. Layout (sau Reflow): Determinarea dimensiunilor geometrice și a poziției fiecărui element pe pagină.
5. Vopsirea (sau Repaint): Umplerea pixelilor pe ecran pe baza arborelui de randare și a datelor de layout.

Optimizarea drumului critic de randare are ca scop ca browserul să afișeze cât mai rapid conținutul semnificativ inițial (First Meaningful Paint) sau interactivitatea (Time to Interactive). Acest lucru se realizează prin minimizarea resurselor blocante (JS și CSS), optimizarea dimensiunii resurselor și încărcarea lor la momentul potrivit.