重绘与回流

---

1、重绘

定义：当render tree 中的一些元素需要更新属性，而这些属性只是影响元素外观，风格，而不会影响布局的，例如background-color。作为称之为重绘（repaint）。

有以下操作会只触发重绘（样式的变化）

---

2、回流

定义：当render tree 的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，被称为回流（reflow）。 有以下操作会触发回流：

1. 一个DOM元素的几何属性发生变化，常见的几何属性有width , height等。
2. DOM节点发生增减或移动
3. 读取offset族、scroll族和client族属性的时候，浏览器为了获取这些值，需要回流操作
4. 调用window.getComputedStyle 方法。

总结：
当页面布局和几何属性改变时就需要回流
回流并将引起重绘，而重绘不一定会引起回流

3、渲染流水线过程

3.1 新建DOM：

3.2 重绘过程：

由于没有导致 DOM 几何属性的变化，所以元素的位置信息不需要更新，省去布局的过程。流程如下：

跳过了生成布局树和建图层树的阶段，直接生成绘制列表

3.3 回流过程

如下图：触发回流的时候，如果 DOM 结构发生改变，则重新渲染 DOM 树，然后将后面的流程(包括主线程之外的任务)全部走一遍。

将解析和合成的过程重新又走了一篇，开销是非常大的。

4、避免重绘回流的方法

频繁触发重绘与回流，会导致UI频繁渲染，最终导致js变慢。

• GPU加速: 利用 CSS3 的transform、opacity、filter这些属性就可以实现合成的效果。
• 在合成的情况下，会直接跳过布局和绘制流程，直接进入非主线程处理的部分，也就是直接交给合成线程处理。
  即能够充分发挥GPU的优势；也没有占用主线程的资源，即使主线程卡住了，效果依然能够流畅地展示。

---

欢迎留言评论~