Budding
Browser Rendering Pipeline
#browser#performance#frontend#rendering
Linked Notes (1)
- ↔CSS Animation Performance: width vs transformMutual reference
How browsers turn HTML into pixels. Every frontend developer should know this.
From HTML to pixels:
HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite
DOM Tree: Parse HTML into Document Object Model
<body>
<div class="container">
<p>Hello</p>
</div>
</body>
CSSOM Tree: Parse CSS into CSS Object Model
.container { width: 100%; }
p { color: black; }
Combine DOM + CSSOM into a tree of visible elements only.
display: none elements are excludedvisibility: hidden elements are included (they take space)Calculate the exact position and size of each element.
Expensive operation. One element change can affect children, siblings, and parents.
Draw the calculated layout into actual pixels.
Merge layers into the final screen.
transform, opacity get promoted to separate layersDifferent CSS properties trigger different stages:
| Property | Layout | Paint | Composite |
|---|---|---|---|
width, height | O | O | O |
background-color | - | O | O |
transform | - | - | O |
opacity | - | - | O |
Key insight: Use only transform and opacity for animations.
See CSS Animation Performance for practical example.
width, height, padding, margin, border)top, left, position)