Critical Rendering Path
The critical rendering path is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on screen.
Steps
HTML -> DOM
CSS -> CSSOM
DOM + CSSOM -> Render Tree -> Layout -> Paint -> Composite1 - Parsing
HTML bytes -> tokens -> nodes -> DOM tree
CSS bytes -> tokens -> nodes -> CSSOM treeJavaScript blocks HTML parsing by default - the parser stops until the script is downloaded and executed.
2 - Render Tree
The browser combines DOM + CSSOM into a render tree - only visible elements with their computed styles. display: none elements are excluded.
3 - Layout (Reflow)
Calculates the exact position and size of every element. Triggered by any change to geometry: width, height, margin, font size, DOM additions.
4 - Paint
Fills in pixels - colors, borders, shadows, text. Expensive for complex styles like box-shadow.
5 - Composite
Layers are combined in the correct order by the GPU. Compositing is cheap - properties like transform and opacity only trigger this step.
Performance implications
transform / opacity -> Composite only (GPU) - fastest
color / background -> Paint + Composite - fast
width / margin -> Layout + Paint + Composite - slowBlocking resources
<!-- blocks rendering until downloaded + executed -->
<script src="app.js"></script>
<!-- downloaded in parallel, executed after HTML parsed -->
<script src="app.js" defer></script>
<!-- downloaded in parallel, executed immediately when ready -->
<script src="app.js" async></script>To optimize: minimize render-blocking resources, use
deferon scripts, avoid forced synchronous layouts (reading layout properties after DOM writes), and animate onlytransformandopacity.
updated