Kritisk renderingsti er sekvensen af trin, som browseren tager for at omdanne HTML, CSS og JS til pixels. At forstå det forklarer, hvad der blokerer rendering, og hvordan man får sider til at tegne hurtigere.
Trinene
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
Hvad der blokerer rendering
Browseren tegner ikke, før CSSOM er klar (for at undgå et blink af ustyliseret indhold). Så stort/langsomt CSS forsinker første tegning — hold kritisk CSS lille og integrer det inline, når det er muligt.
