Kritična pot za risanje je zaporedje korakov, ki jih brskalnik izvede, da HTML, CSS in JS pretvori v piksle. Razumevanje tega pojasnjuje, kaj zaustavlja risanje in kako narediti, da se strani narišejo hitreje.
Koraki
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
Kaj zaustavlja risanje
Brskalnik ne bo narisal, dokler CSSOM ni pripravljen (da se izogne bliskovitemu prikazu nesloganega vsebine). Torej veliki/počasni CSS zamuda prvo risanje — obdržite kritični CSS majhen in ga po možnosti vstavite na mesto.
