Epic: #15
Block: 8 — How Browsers Work: Architecture to Pixels
Series order: 18 of 18
Description
The final stage of the rendering pipeline — how the browser promotes elements to their own GPU layers, composites them on the GPU thread, and why this architecture is the key to smooth animations.
Key topics
- Layer promotion: which CSS properties cause the browser to move an element to its own compositor layer (
transform, opacity, will-change)
- The compositor thread: runs independently of the main thread — animations here survive JavaScript jank
- Rasterisation: converting paint records into bitmaps (pixel grids), done by raster workers
- GPU compositing: the GPU combines the layer bitmaps into the final frame
- Cheap vs expensive animations:
transform/opacity (compositor only, cheap) vs width/top (triggers layout, expensive)
- The
will-change property: hints to the browser to promote a layer in advance
- Core Web Vitals mapped to the pipeline: LCP (render pipeline), CLS (layout shifts), INP (main thread responsiveness)
- The complete rendering pipeline summary: DOM → CSSOM → Render Tree → Layout → Paint → Composite
Epic: #15
Block: 8 — How Browsers Work: Architecture to Pixels
Series order: 18 of 18
Description
The final stage of the rendering pipeline — how the browser promotes elements to their own GPU layers, composites them on the GPU thread, and why this architecture is the key to smooth animations.
Key topics
transform,opacity,will-change)transform/opacity(compositor only, cheap) vswidth/top(triggers layout, expensive)will-changeproperty: hints to the browser to promote a layer in advance