Rendering

The Render Tree

DOM and CSSOM combined into a tree of only the nodes that will actually be painted, each with its computed style. Invisible nodes (display:none, <head>) are left out.

A display:none element is in the DOM but not the render tree.

DOM
p
head
CSSOM
p { color }
Render
Invisible nodes are left out

Tap the example to replay it · press and hold to slow it down

One of 40 cards in javascript flashcards. Browse every card.