Calea critică de randare este secvența de pași pe care browserul o urmează pentru a transforma HTML, CSS și JS în pixeli. Înțelegerea ei explică ce blochează randarea și cum să faci ca paginile să se deseneze mai rapid.
Pașii
text
1. Parse HTML → DOM tree (the document structure)
2. Parse CSS → CSSOM tree (the style rules)
3. DOM + CSSOM → Render tree (visible nodes + their styles)
4. Layout (reflow) → compute each node's geometry (position/size)
5. Paint → fill in pixels (colors, text, images)
6. Composite → combine layers onto the screen
Ce blochează randarea
Browserul nu va desena până când CSSOM-ul este gata (pentru a evita o fulgerare de conținut nestilit). Deci CSS-ul mare/lent întârzie prima dată când se desenează — păstrează CSS-ul critic mic și inline-ează-l când este posibil.