Epic: #15
Block: 8 — How Browsers Work: Architecture to Pixels
Series order: 17 of 18
Description
How the browser calculates the exact pixel coordinates of every visible element — and then converts those geometries into a flat list of drawing instructions for the GPU.
Key topics
- Render tree: combining DOM and CSSOM, excluding invisible nodes (
display: none, <head>)
- Layout (reflow): the algorithm that calculates every element's position and size
- The box model in the layout algorithm: content, padding, border, margin
- Percentage and intrinsic sizing: how the browser resolves relative units
- What triggers a reflow: adding/removing DOM nodes, changing geometry properties, reading layout properties
- LayoutNG: Chrome's modern layout engine and how it handles block/inline/flex/grid
- Paint: converting the layout tree into paint records (draw rectangle, draw text, draw image)
- The display list: the ordered sequence of paint operations
- Paint order and stacking contexts: why
z-index and position affect paint order
Epic: #15
Block: 8 — How Browsers Work: Architecture to Pixels
Series order: 17 of 18
Description
How the browser calculates the exact pixel coordinates of every visible element — and then converts those geometries into a flat list of drawing instructions for the GPU.
Key topics
display: none,<head>)z-indexandpositionaffect paint order