When does reflow happen in a DOM environment?
Asked Answered
G

3

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?

Grouping answered 4/2, 2009 at 5:50 Comment(3)
Different browsers behave differently.Venatic
Except when they behave the same. ;)Tressietressure
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.Caplan
T
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.

Tressietressure answered 14/8, 2009 at 14:33 Comment(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.Lathy
@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 !Undercroft
@Undercroft 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()).Magdeburg
J
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();  
}
Jewel answered 21/9, 2010 at 15:20 Comment(0)
P
1
document.body.style.display = 'none';
document.body.style.display = 'block';

This often solves those incomprehensible layout bugs.

Passbook answered 4/2, 2009 at 7:45 Comment(2)
I ran into a ie6 bug which display a swf in wrong place. Solved by setting swfObj.style.display = "block"Emergence
Wow, you still need to support IE6? Stay strong, trooper.Passbook

© 2022 - 2024 — McMap. All rights reserved.