Layout Paint and Composite: The Rendering Pipeline

After the render tree is built, the browser runs three stages: Layout (calculating element sizes and positions), Paint (filling pixels with colors/text/images), and Composite (combining painted layers and displaying them on screen).

Layout calculates geometry — width, height, x/y position — for every element. Changing properties that affect geometry (width, margin, padding, font-size, position) triggers layout for the element and potentially its entire subtree — the most expensive stage.