DOM vs. CSSOM Construction

DOM and CSSOM: The Twin Trees of Rendering

DOM Construction Pipeline

HTML → Bytes → Characters → Tokens → Nodes → DOM Tree

CSSOM Construction

CSS goes through a similar process but is render-blocking — the browser will not render until the CSSOM is complete because styles cascade.

CSS Specificity

Selector	Score
* (universal)	0
element (div)	1
.class	10
#id	100
inline style	1000

The Render Tree

• display:none elements are excluded
• Pseudo-elements (::before) are IN the Render Tree but NOT the DOM
• visibility:hidden elements ARE in the Render Tree (take up space)

Performance

Browser matches CSS selectors right-to-left. Deep selectors like div > ul > li > a > span are slow. Use flat selectors or utility classes.