重绘、重排、合成

重绘

某个元素的文字颜色、背景颜色等，不影响元素周围或内部布局的属性发生改变，会引起重绘

重排（回流）

某个 DOM 节点的尺寸、布局、隐藏等改变时，或读取 offset、scroll 属性时，浏览器重新渲染部分或全部 DOM 的过程。

重排必将引起重绘，反之不然。

合成(GPU 加速)

利用 CSS3 的transform、opacity、filter(元素滤镜，将模糊或颜色偏移等图形效果应用于元素)等属性，会新建一个图层，可以直接实现合成的效果，也叫GPU 加速。

这种情况下会直接跳过布局和绘制流程，直接交给合成线程开始合成图块。

好处：

• 充分利用了 GPU 资源
• 没有占用主线程的资源，即使主线程卡住了，效果依然能流畅运行

如何减少重排、重绘

CSS 中

• 尽可能在 DOM 树的末端改变 class
• 将动画效果加在BFC元素上，避免影响其他元素。
• 避免使用 table 布局（一个小改动会使整个 table 重新布局）
• 使用visibility:0（引起重绘）代替display:none（引起重排）

JS 中

• 避免频繁更改样式，对于多处更改最好一次性完成
• 避免频繁操作 DOM，创建一个容器元素，在其中完成所有 DOM 操作，再将其添加到文档