1. 什么是重排和重绘？
重排：若渲染树的一部分更新，且尺寸变化，就会发生重排。
重绘：部分节点需要更新，但不改变其他集合形状。如改变某个元素的vidibility、outline、背景颜色等，就会发生重绘。
PS：重绘不一定导致重排，但重排一定会导致重绘。重排会产生比重绘更大的开销。
2. 重排和重绘何时会发生？
触发重排：
（1）页面第一次渲染：在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次重排
（2）浏览器窗口尺寸改变
（3）元素位置和尺寸（宽、高、内外边距、边框等）发生改变的时候
（4）增加或删除DOM节点
（5）内容发生改变（文字数量或图片大小等等）
（6）元素字体大小变化
（7）激活CSS伪类（例如：:hover）
（8）增加或修改样式，设置style属性
（9）查询某些属性或调用某些方法，如：调用getComputedStyle方法，或者IE里的currentStyle时，也会触发重排
（10）display:none（重排并重绘）
触发重绘：
（1）vidibility
（2）outline
（3）背景颜色：color、background-color
（4）visibility:hidden（重排）
3. 如何减少重排和重绘以提升页面性能？
（1）样式集中改变：不要一个个修改属性，应通过一个class来修改。
错误写法：div.style.width="50px";div.style.top="60px"; 正确写法：div.className+="modify"; （2）DOM离线化：一旦我们给元素设置display:none时，元素不会存在于渲染树中，相当于将其从页面“拿掉”，我们之后的操作将不会触发重排和重绘，这叫做DOM的离线化。
dom.display = 'none' // 修改dom样式 dom.display = 'block' （3）批量添加DOM：通过使用DocumentFragment创建一个DOM碎片,在它上面批量操作DOM，操作完成之后，再添加到文档中，这样只会触发一次重排。使用innerHTML永远比DOM操作快。（特别注意：innerHTML不会执行字符串中的嵌入脚本，因此不会产生XSS漏洞）。
（4）复制节点，在副本中修改，然后直接替换当前的节点。
（5）降低受影响的节点：在页面顶部插入节点将影响后续所有节点，而绝对定位元素的改变会影响较少的元素，将position属性设置为absolute或fixed。
（6）分离读写操作。
div.style.top = "10px"; div.style.bottom = "10px"; div.style.right = "10px"; div.style.left = "10px"; console.log(div.offsetWidth); console.log(div.offseHeight); console.log(div.offsetRight); console.log(div.offsetLeft); 原来的操作会导致四次重排和四次重绘，变换顺序之后只会触发一次重排 在第一个console的时候，浏览器把之前上面四个写操作的渲染队列都给清空了。因为渲染队列本来就是空的，所以剩下的console并没有触发重排，仅仅拿值而已。
（7）缓存布局信息。
// bad 强制刷新 触发两次重排 div.style.left = div.offsetLeft + 1 + 'px'; div.style.top = div.offsetTop + 1 + 'px'; // good 缓存布局信息 相当于读写分离 var curLeft = div.offsetLeft; var curTop = div.offsetTop; div.style.left = curLeft + 1 + 'px'; div.style.top = curTop + 1 + 'px'; （8）使用 css spirit，也叫 css 精灵，它将所有的图片放到一张图片上，然后通过定位来实现图片的使用。
参考：
重绘和重拍
重排与重绘
重排和重绘
重绘重排重渲染
END