重排与重绘

---

重排

• 如果通过js或者css修改元素的几何位置属性,例如改变元素的宽度,高度等，那么浏览器会触发样式计算之后的一系列阶段,这个过程叫重排。也叫回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘

• 如修改元素的背景颜色等不影响元素几何属性的,会跳过构建布局树和构建图层树，直接进入绘制阶段(绘制列表)以及后面的一系列操作，这个过程叫做重绘。

两者关系

重排必定会引发重绘，但重绘不一定会引发重排。

触发条件

重排：任何页面布局和几何属性的改变都会触发重排

1. 页面渲染初始化；(无法避免)
2. 添加或删除可见的DOM元素
3. 元素位置的改变，或者使用动画；
4. 元素尺寸的改变——大小，外边距，边框；
5. 浏览器窗口尺寸的变化（resize事件发生时）；
6. 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；
7. 读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE) )

重绘：重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。比如，仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）

优化

1、浏览器自己的优化：浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

2、我们要注意的优化：我们要减少重绘和重排就是要减少对渲染树的操作，则我们可以合并多次的DOM和样式的修改。并减少对style样式的请求。