如何减小浏览器的reflow与repaint

1.避免在document上直接进行频繁的DOM操做，若是确实须要能够采用off-document的方式进行，具体的方法包括但不彻底包括如下几种： (1). 先将元素从document中删除，完成修改后再把元素放回原来的位置 (2). 将元素的display设置为”none”，完成修改后再把display修改成原来的值 (3). 若是须要建立多个DOM节点，可使用DocumentFragment建立完后一次性的加入document 2.集中修改样式 (1). 尽量少的修改元素style上的属性 (2). 尽可能经过修改className来修改样式 (3). 经过cssText属性来设置样式值 3. 缓存Layout属性值 对于Layout属性中非引用类型的值（数字型），若是须要屡次访问则能够在一次访问时先存储到局部变量中，以后都使用局部变量，这样能够避免每次读取属性时形成浏览器的渲染。 var width = el.offsetWidth; var scrollLeft = el.scrollLeft; 4.设置元素的position为absolute或fixed 在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操做须要从新渲染时，浏览器会渲染整个页面。将元素的position设置为absolute和fixed可使元素从DOM树结构中脱离出来独立的存在，而浏览器在须要渲染时只须要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今愈来愈多的Javascript动画方面尤为值得考虑。