8Phase 8 of 12
Render tree
DOM ∩ CSSOM. Only nodes that will actually paint make it in.
Animation loop, let it play, or use the controls.
The render tree (you'll also hear it called the layout tree or box tree) is what you get when the browser walks the DOM, asks the CSSOM what styles apply to each node, and keeps only the ones that will actually show up on screen. The output is a tree of boxes ready for the next phases.
Nodes withdisplay: none aren't in the render tree. Pseudo-elements like ::before are. Text inside an element becomes anonymous text boxes inside the parent's box. The tree's shape determines the work that follows.Takeaway
Hidden things take no rendering work; visible things are now in a tree shaped for layout and paint.