Journey of a render tree node

um...What's a node?

After style sheets have been loaded on the client's side, the browser will begin to build a second tree of these nodes even if the <abbr title="document object model">DOM</abbr> has not been completely loaded. This render tree is our visual representation of the <abbr title="document object model">DOM</abbr> where each element is a node. These nodes are rectangles whose structure and properties are defined by the "box-model."

Where a node starts

Render Nodes are initially created without geometric properties with regards to position and size. These attributes are established in a subsequent layout process that iterates through the entire render tree and uses the CSS Visual Flow Model to position and size each visual node. When the documents layout is complete the browser finally draws the nodes to screen with the "paint process"

What happens to the node?

If I were to say ... change a node geometrically within the DOM after layout with Javascript, the nodes relevant part of the render tree is invalidated, rebuilt, reflowed and finally repainted.
Properties such as background-color</code> or font-family</code> that don't change a node geometrically are therefore much faster to render.