Kritisk renderingsväg är sekvensen av steg som webbläsaren vidtar för att förvandla HTML, CSS och JS till pixlar. Att förstå detta förklarar vad som blockerar rendering och hur du gör sidor snabbare att måla.
Stegen
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
Vad blockerar rendering
Webbläsaren kommer inte att måla förrän CSSOM är klara (för att undvika ett blinkande ostylt innehål). Så stor/långsam CSS försenar första måling — håll kritisk CSS liten och infoga den när det är möjligt.