How the Browser Renders a Page

What happens between the browser receiving HTML/CSS bytes and pixels showing on screen - parsing, the render tree, layout, paint, and why some style changes are far more expensive than others.

1. Parsing: From Bytes to DOM and CSSOM The browser builds the DOM while HTML is still streaming in, builds the CSSOM from CSS in parallel, and a script tag without defer or async can stop both cold.
2. The Render Tree, Layout, and Paint The DOM and CSSOM combine into a render tree of only the visible boxes, layout computes each box's exact size and position, and paint fills in the actual pixels.
3. Why Some Changes Are Expensive Changing geometry re-runs layout, paint, and composite; changing color skips layout; changing transform or opacity can skip both and run on the compositor thread, which is why they're the go-to properties for smooth animation.