重排重绘

渲染树：渲染引起会解析HTML文档来构建DOM树，也会用CSS解析器解析CSS文档构建CSSOM树，接下来DOM树和CSSOM树关联起来构成渲染树。

触发重排：对DOM的修改引发了DOM几何元素的变化，渲染树需要重新计算。

触发重绘：只要visibilty， outline， 背景色等属性导致样式的变化，是浏览器需要根据新的属性进行绘制。

重绘不一定导致重排，重排一定会导致重绘。重排的开销比重绘大，减少重排的触发可以提升性能。

触发重排的操作：

1. 页面第一次渲染
2. 浏览器窗口尺寸改变
3. 元素位置和尺寸发生改变
4. 新增或删除可见元素
5. 内容发生改变（文字数量或图片大小等）
6. 元素字体发生变化
7. 激活css伪类（:hover）
8. 设置style属性
9. 查询某些属性或调用某些方法（offset类[offsetTop, offsetLeft, offsetWidth, offsetHeight], scroll类[scrollTop, scrollLeft, scrollWidth, scrollHeight]，client类[clientTop, clientLeft, clientWidth, clientHeight]）,调用方法如，getComputedStyle, currentStyle，因为他们都为求一个“即时性”和“准确性”。

触发重绘的操作：

visibilty， outline， 背景色等属性导致样式的变化。

提升性能，减少重排重绘方法：

1. 改变style值的时候，可以统一修改，用cssText，不过如果有属性不能被覆盖的话，不能用这个
2. 批量修改DOM，将需要修改的DOM抽离出来，隐藏元素使它脱离文档流，用文档片段Fragment来进行修改
3. 缓存布局信息
4. 避免大量使用hover
5. 动画使用绝对定位，提出文档流