回流-重绘-合成

更新视图三种方式

• 回流、重绘、合成

回流

另外一个叫法是重排，回流触发的条件就是:对 DOM 结构的修改引发 DOM 几何尺寸变化的时候,会发生回流过程。 具体一点，有以下的操作会触发回流:

一个 DOM 元素的几何属性变化，常见的几何属性有width、height、padding、margin、left、top、border 等等, 这个很好理解。 使 DOM 节点发生增减或者移动。 读写 offset 族、scroll 族和 client 族属性的时候，浏览器为了获取这些值，需要进行回流操作。 调用 window.getComputedStyle 方法。

一些常用且会导致回流的属性和方法：

clientWidth、clientHeight、clientTop、clientLeft offsetWidth、offsetHeight、offsetTop、offsetLeft scrollWidth、scrollHeight、scrollTop、scrollLeft scrollIntoView()、scrollIntoViewIfNeeded() getComputedStyle() getBoundingClientRect() scrollTo()

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

重绘

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。 根据概念，我们知道由于没有导致 DOM 几何属性的变化，因此元素的位置信息不需要更新，从而省去布局的过程，流程如下：

跳过了布局树和建图层树,直接去绘制列表，然后在去分块,生成位图等一系列操作。 可以看到，重绘不一定导致回流，但回流一定发生了重绘。

合成

还有一种情况：就是更改了一个既不要布局也不要绘制的属性，那么渲染引擎会跳过布局和绘制，直接执行后续的合成操作，这个过程就叫合成。 举个例子：比如使用CSS的transform来实现动画效果，避免了回流跟重绘，直接在非主线程中执行合成动画操作。显然这样子的效率更高，毕竟这个是在非主线程上合成的，没有占用主线程资源，另外也避开了布局和绘制两个子阶段，所以相对于重绘和重排，合成能大大提升绘制效率。 利用这一点好处：

• 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
• 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
• 对于 transform 和 opacity 效果，不会触发 layout 和 paint

提升合成层的最好方式是使用CSS的 will-change属性

GPU 加速原因

比如利用CSS3 的transform、opacity、filter这些属性就可以实现合成的效果，也就是大家常说的 GPU 加速。

• 在合成的情况下，直接跳过布局和绘制流程，进入非主线程处理部分，即直接交给合成线程处理。
• 充分发挥 GPU 优势，合成线程生成位图的过程中会调用线程池，并在其中使用 GPU 进行加速生成，而 GPU 是擅长处理位图数据的。
• 没有占用主线程的资源，即使主线程卡住了，效果依然流畅展示。

实践意义

• 使用createDocumentFragment进行批量的 DOM 操作
• 对于resize、scroll等进行防抖/节流处理。
• 动画使用transform或者opacity实现
• 将元素的will-change 设置为 opacity、transform、top、left、bottom、right。这样子渲染引擎会为其单独实现一个图层，当这些变换发生时，仅仅只是利用合成线程去处理这些变换，而不牵扯到主线程，大大提高渲染效率。
• 对于不支持will-change属性的浏览器，使用一个3D transform属性来强制提升为合成transform: translateZ(0);
• rAF优化等等