- Avoid setting multiple inline styles; avoid setting styles individually. These trigger a reflow for each dynamic style change.
- 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.
- 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. - 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. - Apply animations with position fixed or absolute. So the animation doesn’t affect the layout of other elements.
- 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