重排(reflow)和重绘(repaint)

什么是重排：
引起DOM树重新计算的行为。
什么时候会发生重排：
添加或删除可见的DOM元素
元素的位置改变
元素的尺寸大小改变
元素的内容改变
页面渲染初始化
浏览器窗口尺寸改变
什么是重绘：
元素可见的外观被改变，但并没有影响到布局
什么时候会发生重绘:
DOM元素的字体颜色、改变visibility、outline、背景色。
重绘不会带来DOM元素的重新计算，所以并不一定伴随重排，但是重排一定会引起浏览器的重绘。
如何减少重排或重绘
1.合并多次DOM操作为单次DOM操作

element.style.borderColor="pink";
element.style.borderStyle="solid";
element.style.borderWidth="1px";
//优化
element.style.cssText+="border: 1px solid pink";

2.把DOM元素离线或隐藏后修改
1）使用文档片段

var fragment=document.createDocumentFragment();

2）通过设置DOM元素的display样式为none来隐藏元素

element.style.display='none';
//一些基本的操作
element.style.diaplay='block';

3）设置具有动画效果的DOM元素的position属性为fixed或absolute，这样元素脱离了文档流，它的变化就不会影响到其他的元素。
4）谨慎取得DOM元素的布局信息
尽量不要在布局信息改变时做查询，否则会导致渲染队列的强制刷新。