What is DOM reflow?
A reflow computes the layout of the page. A reflow on an element recomputes the dimensions and position of the element, and it also triggers further reflows on that element’s children, ancestors and elements that appear after it in the DOM. Then it calls a final repaint. Reflowing is very expensive, but unfortunately it can be triggered easily.
Reflow occurs when you:
- insert, remove or update an element in the DOM
- modify content on the page, e.g. the text in an input box
- move a DOM element
- animate a DOM element
- take measurements of an element such as offsetHeight or getComputedStyle
- change a CSS style
- change the className of an element
- add or remove a stylesheet
- resize the window
- scroll
For more information, please refer here: Repaints and Reflows: Manipulating the DOM responsibly
What's the difference between reflow and repaint?
This posting seems to cover the reflow vs repaint performance issues
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
As for definitions, from that post:
A repaint occurs when changes are made
to an elements skin that changes
visibly, but do not affect its
layout.Examples of this include
outline
,visibility
,background
,
orcolor
. According to Opera, repaint is
expensive because the browser must
verify the visibility of all other
nodes in the DOM tree.A reflow is
even more critical to performance
because it involves changes that
affect the layout of a portion of the
page (or the whole page).Examples that cause reflows include: adding or removing content, explicitly or implicitly changing
width
,height
,font-family
,font-size
and more.
Learn which css-properties effect repaint and review at http://csstriggers.com
When does reflow happen in a DOM environment?
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.
Quick one about DOM Reflow
In my previous post I boldly claimed that elements with display: none
will not have anything to do with the render tree. IE begs to differ
(thanks to dynaTrace folks for pointing that out).A good way to minimize reflows is to update the DOM tree "offline" out
of the live document. One way to do so is to hide the element while
updates are taking place and then show it again.
Check out http://www.phpied.com/the-new-game-show-will-it-reflow/
Which DOM element properties can cause the browser to perform a reflow operation when modified?
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
Javascript Performance - Dom Reflow - Google Article
You will find it hard to get meaningful figures for this from javascript profiling as you are really on saving repaints and re-flows which won't show up in most profiling tools. You can use the Firebug paint events extension to show you visually how many repaints you're saving.
Related Topics
How to Make Html5 Video Fullscreen
Remove White Space Above and Below Large Text in an Inline-Block Element
Input/Button Elements Not Shrinking in a Flex Container
How to Make a ≪Div≫ Always Full Screen
How to Copy Contents of One Canvas to Another Canvas Locally
Css Background Image to Fit Width, Height Should Auto-Scale in Proportion
Change Bootstrap Tooltip Color
How to Assign Multiple Classes to an HTML Container
Border Length Smaller Than Div Width
Two Inline-Block Elements, Each 50% Wide, Do Not Fit Side by Side in a Single Row
How to Wrap Text Around an Image Using Html/Css
Are Single Quotes Allowed in Html