The Critical Rendering Path
To render a page, browsers execute a sequence of operations:
1. Parse HTML to build the Document Object Model (DOM) tree.
2. Parse CSS to build the CSS Object Model (CSSOM) tree.
3. Combine DOM and CSSOM to create the Render Tree.
Layout, Paint, and Composite
- Layout: Calculates the geometry, size, and location of every node on the page.
- Paint: Fills in pixels (text colors, borders, images) across layers.
- Composite: Merges layers onto the screen in the correct order. Animating layouts triggers full repaints, while compositing transforms (like `translate3d`) runs fast on GPU pipelines.