Render Tree Compilation
How the browser merges the DOM and CSSOM to create the final Render Tree.
What it is
The Render Tree is the union of the DOM and the CSSOM. It contains only the nodes that are required to render the page, along with their computed styles.
Any node that is hidden (like <head>, <meta>, or display: none) is omitted from the Render Tree completely.
Why it matters
The Render Tree determines exactly what will be drawn to the screen. Understanding what goes into it (and what doesn't) is key to writing performant CSS.
If you change a style in JavaScript that affects the Render Tree structure (like toggling display: none), you force the browser to re-compile the tree, which triggers expensive Layout calculations.
How it works
The browser starts at the root of the DOM tree and traverses each visible node.
For each visible node, it finds the matching CSSOM rules and applies them to compute the final styles.
Nodes like script, meta, and link are skipped. Nodes styled with display: none are also skipped, along with all of their children.
The resulting Render Tree is a new data structure containing visible nodes and their computed styles, ready for the Layout phase.
Try it
Drag the toggle to see how display: none vs visibility: hidden affects the Render Tree compilation.
The DOM Tree
All elements exist in the DOM.
The Render Tree
Box 2 is completely excluded from the Render Tree. Box 3 moves up.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- The Render Tree is DOM + CSSOM.
- Invisible elements (head, meta) and
display: noneelements are excluded. visibility: hiddenelements are included in the tree and take up space.
Done with this concept?
Mark it complete to track your progress. No login needed.