The DOM tree has all HTML elements, but not all are visible (e.g., <head>, display: none). The CSSOM has all styles, but not all apply to every element. We need a combined tree of only visible elements with their styles attached.
The render tree combines the DOM tree and CSSOM, keeping only visible elements and attaching their computed styles. This is the tree used for layout and painting—invisible elements are excluded.
- Start with DOM: Traverse the DOM tree
- Check visibility: Skip elements that are
display: noneor in<head> - Attach styles: For each visible element, compute its styles from CSSOM
- Build render tree: New tree with visible elements + computed styles
DOM: <div style="display:none"> (skipped)
DOM: <h1> (included, with styles attached)
- Only visible elements included (
display: noneexcluded) - Each node has computed styles (inherited + specified + default)
- Render tree nodes are called “render objects” or “frames”
- Changes to DOM or CSS can trigger render tree reconstruction
- Built from: DOM Tree — provides the structure
- Built from: CSSOM — provides the styles
- Builds into: Layout — render tree is input to layout
- Related: Browser Rendering — render tree is step 3
- Contrasts with: DOM Tree — DOM has everything; render tree has only visible
visibility: hiddenelements ARE in render tree (take space, just invisible)display: noneelements are NOT in render tree- Pseudo-elements (
::before) are in render tree but not DOM - Rebuilding render tree is expensive (triggers layout + paint)