重绘和重排

浏览器的运行机制

1. 构建DOM树：渲染引擎解析HTML文档，将所有标签转换为DOM树中的DOM节点生成内容树
2. 构建渲染树：解析对应的CSS样式文件信息，样式树与DOM树结合构建成渲染树
3. 布局渲染树：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标
4. 绘制渲染树：遍历渲染树，使用UI后端层来绘制每一个节点

---

重绘

定义：当一个元素的属性确定后，浏览器根据这些特性绘制该元素，使之呈现在页面上。重绘指的是一个元素的外观属性发生了改变触发浏览器根据元素的新属性重新绘制该元素使之呈现出新的外观。

触发条件：元素外观属性改变，如颜色等。

注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

---

重排

定义：当渲染树中的一部分（或者全部）因为元素的尺寸、布局、可见性等的改变而触发浏览器对页面的重新构建的行为。也成为回流或重构，每个页面至少有一次重排行为，发生在第一次加载页面的时候。

触发条件：页面布局或几何属性的改变

常见的情况：

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离线

1. 浏览器的优化：浏览器会维护一个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定数量或时间间隔，浏览器就对该队列进行一个批处理。这样使得多次的重绘重排变为一次。
2. 手动优化：本质是减少对渲染树的改变，可以合并多次的DOM和样式修改，减少对样式的请求。

• 不要逐一修改DOM样式，先定义好CSS的类名，需要时直接改变元素的类名
• display：先设置元素为display:none;然后进行页面布局等操作，完成后再设置元素为display:block;这样只会触发两次重绘和重排
• 尽量避免使用table布局
• 将需要多次重排的元素设置position:absolute/fixed，脱离了文档流，它的变化就不会影响到其他元素
• 如果需要创建多个DOM节点，使用documentFrag门头创建完成后一次性加入document
• 使用cloneNode和replaceChild技术，触发一次重绘和重排
• 不要经常访问浏览器的flush队列属性。必须访问时可以利用缓存，将访问的值存储起来，接下来使用就不会再触发重排

总结了一波还是感觉生硬，希望今后有机会实战运用这些知识，理解透彻。