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, or color. 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).
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.
Examples that cause reflows include: adding or removing content, explicitly or implicitly changing width, height, font-family, font-size and more.
Other examples:
- Resizing the window
- Changing the font
- Adding or removing a stylesheet
- Content changes, such as a user typing text in
an input box - Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)
- Manipulating the class attribute
- A script manipulating the DOM
- Calculating offsetWidth and offsetHeight
Example of something that will cause reflow
for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';
document.body.appendChild(newEle);
}
The above code is very inefficient, causing 100 reflow processes for every new paragraph element appended.
You can mitigate this computationally stressful process by using .createDocumentFragment()
const docFrag = document.createDocumentFragment();
const docFrag = document.createDocumentFragment();
for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';
docFrag.appendChild(newEle);
}
document.body.appendChild(docFrag);
The above code will now instead only use the reflow process 1x for the creation of 100 new paragraph elements.
Ohh, then how to get rid of reflow?
Reflows can be top-down or bottom-up as reflow information is passed to surrounding nodes. Reflows are unavoidable, but you can reduce their impact- Change classes on the element you wish to style (as low in the dom tree as possible)
- Avoid setting multiple inline styles
- Apply animations to elements that are position fixed or absolute
- Trade smoothness for speed
- Avoid tables for layout
- Avoid JavaScript expressions in the CSS (IE only)
2. Avoid setting multiple inline styles which would each cause a reflow, the styles should be combined in an external class which would cause only one reflow when the class attribute of the element is manipulated.
3. Apply animations with position fixed or absolute: . They don’t affect other elements layout, so they will only cause a repaint rather than a full reflow
4. Trade smoothness for speed: Opera also advises that we trade smoothness for speed. What they mean by this is that you may want to move an animation 1 pixel at a time, but if the animation and subsequent reflows use 100% of the CPU the animation will seem jumpy as the browser struggles to update the flow. Moving the animated element by 3 pixels at a time may seem slightly less smooth on very fast machines, but it won’t cause CPU thrashing on slower machines and mobile devices.
5. Avoid tables for layout (or set table-layout fixed): tables often require multiple passes before the layout is completely established because they are one of the rare cases where elements can affect the display of other elements that came before them on the DOM. Imagine a cell at the end of the table with very wide content that causes the column to be completely resized. This is why tables are not rendered progressively in all browsers. According to Mozilla, even minor changes will cause reflows of all other nodes in the table.
Useful Resources:
https://csstriggers.com/
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
https://stackoverflow.com/questions/2549296/whats-the-difference-between-reflow-and-repaint
