Summary
“Life of a Pixel” explains the browser rendering pipeline: DOM, CSSOM, style, layout, paint, rasterization, compositing, and display.
Interview Points
- HTML becomes DOM; CSS becomes CSSOM; together they produce the render tree.
- Style and layout determine what elements look like and where they go.
- Paint records drawing commands; raster turns them into pixels.
- Compositing combines layers efficiently, often on the GPU.
- Performance issues come from forced layout, expensive paint, large DOMs, and unnecessary layer churn.
2-3 Minute Interview Script
“When a browser renders a page, it parses HTML into the DOM and CSS into the CSSOM. From there it computes styles, performs layout to determine geometry, paints visual instructions, rasterizes them into pixels, and composites layers onto the screen.
The interview-level insight is that different CSS and JavaScript changes trigger different amounts of work. Changing text or dimensions can cause layout. Changing shadows or backgrounds can cause paint. Changing transform or opacity can often be handled by compositing, which is cheaper.
In a real performance investigation, I would look for layout thrashing, unnecessary DOM size, expensive paint areas, and animations that use layout-affecting properties. For smooth animation, I prefer transform and opacity where possible.
The senior-level answer is that rendering performance is about reducing invalidation and keeping the main thread available.”
Follow-Ups
- What causes layout thrashing?
- Why are
transformandopacityanimation-friendly?