HTML & CSS
/Advanced
Render Tree
Definition
The Render Tree is a combination of the DOM and CSSOM. It represents exactly what will be drawn to the screen. It only includes nodes that are visible.
Explain Like I'm New
The DOM knows every HTML tag that exists. The CSSOM knows every style rule. The Render Tree is the final boss. It combines them both. If the DOM has a `<div>`, but the CSSOM says `display: none`, that `<div>` is completely excluded from the Render Tree because the screen doesn't need to paint it.
Real World Example
This is why `display: none` is good for performance when hiding huge chunks of a webpage. The browser literally ignores them when calculating the Render Tree.
Common Use Cases
- •Browser architecture knowledge
Interactive Example
Interview Questions
basic
- What two trees combine to form the Render Tree?
intermediate
- If an element has `visibility: hidden;`, is it included in the Render Tree?