Krytyczna ścieżka renderowania to sekwencja kroków, które przeglądarka podejmuje, aby zamienić HTML, CSS i JS na piksele. Zrozumienie jej wyjaśnia, co blokuje renderowanie i jak sprawić, że strony będą się malować szybciej.
Etapy
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
Co blokuje renderowanie
Przeglądarka nie będzie malować, dopóki CSSOM nie będzie gotowy (aby uniknąć błysku niestyilizowanej zawartości). Dlatego duży/wolny CSS opóźnia pierwsze malowanie — trzymaj krytyczny CSS mały i gdy możliwe, osadź go inline.