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.

Answer 2

My understanding, based on the results presented by this tool https://developer.chrome.com/devtools/docs/timeline is that NO, the entire DOM is not repainted/regenerated, just the element that had the class change.

Demo

HTML:

<p>Lorem ipsum dolar sit amet...</p>

<input id="btn" type="button" value="click me" />

Javascript:

$(document).on('click', '#btn', function () { 
  $('p').addClass('red')  
})

CSS:

.red {
    color: red;
}

****edit**** I had to change my answer from No to Yes, then back to No from Yes. This tool clearly points to the element in question being repainted, the other DOM elements aren't affected.

However If the element inner/outer dimension is changed, or even needs to be queried by the javascript, this will require the DOM element to be redrawn and the entire elements branch will be redrawn then cached by the browser.

Answer 3

The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance.