Two trees, one render
Before a page can render, the browser builds two object models from your source: the DOM from HTML and the CSSOM from CSS.
The DOM
- The Document Object Model is a tree of nodes mirroring your HTML structure.
- Scripts read and mutate it through APIs like getElementById and appendChild.
- Parsing is incremental, so the DOM can grow as bytes arrive.
The CSSOM
- The CSS Object Model is a tree of style rules and their specificity.
- It is render blocking: the browser will not paint meaningful content until the CSSOM is ready, because a rule near the end could change everything above it.
- Each node ends up with a fully resolved set of computed styles.
Combining them
The browser merges the DOM and CSSOM into a render tree that contains only visible nodes with their final styles. Elements set to display none are dropped here because they produce no boxes.
Why this matters
Large stylesheets delay first paint. Splitting critical CSS and deferring the rest lets the browser build a usable CSSOM faster.
Key idea
The DOM and CSSOM are separate trees that merge into a render tree of visible, styled nodes before any layout happens.