6

Which of these DOM element properties can cause browser to perform a reflow operation?

  • innerHTML
  • offsetParent
  • style
  • scrollTop
alex
  • 479,566
  • 201
  • 878
  • 984
Om3ga
  • 30,465
  • 43
  • 141
  • 221
  • 1
    Modifying or accessing some properties causes reflow. Even **reading a property** that needs recalculation, like accessing `offsetWidth`, or using `getComputedStyle` will cause a reflow !! – Om Shankar Dec 09 '13 at 09:04

3 Answers3

13

In a nutshell, any property that causes an element to change size or move will cause a reflow because that change of size or position can affect other elements. Browsers spend effort trying to be as efficient as possible to identify what might need to be reflowed, but each has a different way of doing that.

Properties that cannot affect the size or position of an element such as a background color should not trigger a reflow, though there is no guarantee that every browser is smart enough to implement this.

In your list:

innerHTML changes the HTML of an object which certainly can affect size and position and will trigger at least a partial reflow.

offsetParent appears to me to be a read-only property that isn't something you set directly so reading it shouldn't cause a reflow if one wasn't otherwise already scheduled.

style is the gateway to lots of properties, including height and width which obviously would lead to at least a partial reflow.

scrollTop need not cause a reflow because layout is generally not changed, just a scroll position of one element (and it's children). The layout should remain the same, just a repaint is required.

It's probably worth saying also that most properties that lead to a reflow, don't immediately cause that reflow, but rather they schedule the reflow for some short time in the future. That way, if some javascript runs that changes a bunch of different properties, each of which needs a reflow, the browser isn't doing N reflows, but rather, it schedules the reflow, waits for the current javascript thread of execution to finish and then it carries out whatever reflows are needed just once. There are some properties that when read, cause all reflows that are pending to be done now because those properties could have inaccurate values if the reflows aren't done right away. You can read about that in this earlier post: Forcing a DOM refresh in Internet explorer after javascript dom manipulation

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
3

It depends.

  • innerHTML will only trigger a reflow when setting it changes the DOM.
  • offsetParent shouldn't do anything, getting it might flush the render tree queue.
  • style might trigger reflow and repaint when setting it (or properties of it) or chain those actions. Some properties like color should only trigger repaints.
  • scrollTop would trigger a repaint on setting, getting it might flush the queue.
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
2

Strangely enough I'm pretty sure all of them cause reflows & even repaints.

Here's an article about it all: Reflows & Repaints

Mark Pieszak - Trilon.io
  • 61,391
  • 14
  • 82
  • 96
  • Are these all DOM element properties? – Om3ga Jul 23 '12 at 16:34
  • Now it is clear that all of them cause reflows. But which is the best in my option? I am still confused to find the best option. – Om3ga Jul 23 '12 at 16:45
  • 1
    While this may answer the question, [it would be preferable](//meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – jhpratt Sep 20 '19 at 03:15