重绘（repaint）与重排（reflow）

重绘

屏幕的一部分要重绘。渲染树节点发生改变，但是不影响节点在页面中得空间位置及大小。
譬如：某个div节点得背景颜色发生改变，但是div节点得宽/高/内外边距不发生改变，此时就会触发浏览器重绘。

重排（也叫 回流）

当渲染树节点发生改变，影响了节点得几何属性（如：宽/高/内外边距/float/position/display:none;等），导致节点位置发生变化，此时就会触发浏览器重排。

注意：重排必将引起 重绘， 而 重绘不一定会引起重排。

重排 的 触发场景？

1、添加或者删除可见的DOM元素；

2、元素位置改变——display、float、position、overflow等等；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时；

如何减少和避免重排

重排的成本比重绘的成本高很多。大量重排 在性能高的电脑上 也许看不出来什么 ，但是放在手机上运行，会导致 延慢加载 和 耗电发热。

解决方案：

1.直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）；

2.让要操作的元素进行”离线处理”，处理完后一起更新；
a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存；

4.让元素脱离动画流，减少回流的Render Tree的规模；