6 Best Practices to Minimize Reflow

  1. Avoid setting multiple inline styles; avoid setting styles individually. These trigger a reflow for each dynamic style change.
  2. Use classNames of elements, and do so as low in the DOM tree as possible.  Changing the class attribute lets you apply multiple styles to an element with a single reflow.  But since this reflows all the element’s children, that means you don’t want to change the class on a wrapper div if you’re only targeting its first child.
  3. Batch your DOM changes and perform them “offline”.  ”Offline” means removing the element from the active DOM (e.g. $.detach()), performing your DOM changes and then re-appending the element to the DOM.
  4. Avoid computing styles too often.  If you must then cache those values.  E.g. store  var offsetHt = elem.offsetHeight once instead of calling it multiple times.
  5. Apply animations with position fixed or absolute.  So the animation doesn’t affect the layout of other elements.
  6. Stay away from table layouts, they trigger more reflows than block layouts because multiple passes must be made over the elements.

source via: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom-responsibly