Does the browser re-render the whole page on changes or only the specific elements?

Question

Assume I have an element with id #msg and on a certain condition I want to add to it a class in order to apply a style e.g. to make the text appear red.
I can do $('#msg').addClass(theclass)
My question is how does the browser react? Does it re-render all of the page or does it re-render that specific element?

Answer 1

With your example (addClass), it depends what is in the class you add. Adding of the class itself only modifies the attribute on the targeted node.

• Some changes will cause a repaint, that is when changing the color, bgcolor, etc. Only the elements to which the new CSS is applied, will be re-rendered.
• Some changes will cause a reflow, that is when the visible space occupied by elements or their contents change dimensions or position. Depending on their own, & their parent's & children's properties, and those's parent's & children's properties, and so on, and so on, the reflow will affect more elements in the document tree.

Browsers are smart enough to only modify the elements that require re-rendering. A technique to minimize the amount of re-renders is to set the element's position: absolute or display: none to remove it temporarily from the document flow, make your changes, then re-insert. This is especially important if, eg. you make some element slide down. If the element is in the flow & at the beginning of the DOM tree, every pixel it stretches will cause a re-render.

For the sake of fun, let's make a simple analogy with paper on a desk, in this example with element insertion. The desk is your browser window, □ = paper, _ = empty space. You want to put another sheet at the top left-most position. This is the start-situation:

□ □ □ □
□ □ □ □
_ _ _ _

After you put your new sheet on the desk: (■ = new, ▧ = moved)

■ □ □ □
▧ □ □ □
▧ _ _ _

If the second row was one long roll of paper though (= a full-width div), the entire row would move:

■ □ □ □
▧ _ _ _
▧▧▧▧▧▧▧

If you inserted the sheet on the third row however, no reflow would occur.

Note: This is the theoretical explanation. Its efficiency will vary per browser.
Source: High Performance Javascript, 'Repaints & reflows', p.70.