HTML becomes a document tree
The browser parses HTML into the DOM, a tree describing the document’s elements. It can begin processing before the full response arrives.
Browser rendering
The DOM, layout, paint, and compositing stages behind a page.
Process overview
- Parse
- Style
- Layout
- Paint
- Composite
Steps
5 stepsCSS gives the tree its appearance
The browser parses CSS into the CSSOM. Style calculation combines document structure and matching rules to determine the appearance of elements.
Every visible box gets geometry
Layout computes the position and size of boxes. A change that affects geometry can require the browser to perform layout again.
The boxes become pixels
Painting draws visual details such as text, colors, borders, and shadows. The browser can split work into layers.
Layers meet on the screen
When needed, compositing assembles layers in the correct order. Future changes may trigger style, layout, paint, or compositing work again.
Keyboard: ←→
Scope
The core browser rendering stages, simplified. Scripts, resource loading, engine behavior, and the kind of change affect actual work.
