53

What kinds of activities will trigger reflow of web page with DOM?

It seems there are different points of view. According to http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/, it happens

  • When you add or remove a DOM node.
  • When you apply a style dynamically (such as element.style.width="10px").
  • When you retrieve a measurement that must be calculated, such as accessing offsetWidth, clientHeight, or any computed CSS value (via getComputedStyle() in DOM-compliant browsers or currentStyle in IE).

However, according to http://dev.opera.com/articles/view/efficient-javascript/?page=3, taking measurement triggers reflow only when there is already reflow action queued.

Does anybody have any more ideas?

3
  • Different browsers behave differently.
    – some
    Feb 4, 2009 at 6:09
  • 10
    Except when they behave the same. ;)
    – coderjoe
    Aug 14, 2009 at 14:33
  • Check out Paul Irish's talk on avoiding reflows: reflows are caused by changes in height, width, offsetWidth etc. Absolute positioning does not trigger reflows.
    – ruhong
    Sep 27, 2015 at 5:03

3 Answers 3

49

Both articles are correct. One can safely assume that whenever you're doing something that could reasonably require the dimensions of elements in the DOM be calculated that you will trigger reflow.

In addition, as far as I can tell, both articles say the same thing.

The first article says reflow happens when:

When you retrieve a measurement that must be calculated, such as accessing offsetWidth, clientHeight, or any computed CSS value (via getComputedStyle() in DOM-compliant browsers or currentStyle in IE), while DOM changes are queued up to be made.

The second article states:

As stated earlier, the browser may cache several changes for you, and reflow only once when those changes have all been made. However, note that taking measurements of the element will force it to reflow, so that the measurements will be correct. The changes may or may not not be visibly repainted, but the reflow itself still has to happen behind the scenes.

This effect is created when measurements are taken using properties like offsetWidth, or using methods like getComputedStyle. Even if the numbers are not used, simply using either of these while the browser is still caching changes, will be enough to trigger the hidden reflow. If these measurements are taken repeatedly, you should consider taking them just once, and storing the result, which can then be used later.

I take this to mean the same thing they said earlier. Opera will try its hardest to cache values and avoid reflow for you, but you shouldn't rely on its ability to do so.

For all intents and purposes just believe what they both say when they say that all three types of interactions can cause reflow.

Cheers.

3
  • Is there any way to force a repaint (in addition to reflow)? In order to render a large page in small increments, and therefore increase end-user perceived rendering speed. May 11, 2012 at 9:04
  • @coderjoe, "taking measurements of the element will force it to reflow" why they are not cached in the browsers ? What happen if I just called getComputedStyle 3 times immediately after each others ! Will I have 3 reflows !
    – faressoft
    Oct 9, 2017 at 4:35
  • @faressoft You misunderstand. A reflow only ever occurs after something on-page changes. If you make no changes to the DOM in-between your calls, then only the first will (potentially) cause a reflow, assuming prior changes were made. (Erm, With the possible caveat that I'm not certain about the effect of running animations/transitions... it could be that they'll trigger reflows even while JS is in the middle of running user code... I'd guess otherwise, but if they do then that might get you a reflow each time you called getComputedStyle()).
    – Doin
    Jul 31, 2021 at 10:53
4

Look at the "Rendering triggered by Property Read Access" section of Understanding Internet Explorer Rendering Behaviour, where the following code in IE will cause rendering activity.

function askforHeight () {
  $("#lower").height();  
}
1
document.body.style.display = 'none';
document.body.style.display = 'block';

This often solves those incomprehensible layout bugs.

2
  • I ran into a ie6 bug which display a swf in wrong place. Solved by setting swfObj.style.display = "block"
    – aztack
    Apr 15, 2014 at 10:18
  • 32
    Wow, you still need to support IE6? Stay strong, trooper.
    – I.devries
    Apr 15, 2014 at 11:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.