Last Updated: February 25, 2016
· szymonkor

Reflows and repaints; how to make websites faster

Source: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/ Read this post if you need extensive info.

I love this blog btw. I stumbled upon this article when I was changing rendering system for few thousand views in backbone.js. I managed to make it 14x faster through replacing tables with divs, reducing reduntant code, and caching.

What are repaints and reflows?

  • A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout
  • A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page

Why avoid them?

Reflows are very expensive in terms of performance, and is one of the main causes of slow DOM scripts, especially on devices with low processing power, such as phones. In many cases, they are equivalent to laying out the entire page again.

Where do they exactly happen? http://www.mozilla.org/newlayout/doc/reflow.html - most popular cases are resizing the window, setting height or width, content changes, appeding elements... Each time you see a change on a website , a reflow or a repaint happens.

How to avoid them?

  • 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)