重排重绘

我们知道在浏览器渲染过程中存在重排和重绘过程

重排 当出现以下行为时，会引起重排。

• 添加或删除DOM元素

• 元素的位置发生变化

• 元素的尺寸发生变化

• 浏览器的窗口尺寸变化

重绘 对 DOM 操作简单修改样式（比如修改元素的 visibility、color、background-color 等）时会引起重绘

---

重排一定会引起重绘！

相比较来看，重拍的花销是比重绘要大得多的。所以我们在优化性能的时候会尽量减少dom操作来减少重排。

（跟踪重绘：打开Chrome的DevTools中rendering里面的paint flashing选项）

GPU硬件加速

之前一直有个疑问，在运行css动画的时候，元素的位置经常改变，岂不是会频繁引起重排？

直到我了解到了CSS动画的GPU硬件加速

原理

当浏览器接收到页面的信息，他会将页面解释成DOM树。DOM树和CSS让浏览器构建渲染树。

渲染树包含渲染对象——在页面中需要渲染的元素。每一个渲染对象被分配到一个图层中。每一个图层被更新到GPU。通过transform的层会使用GPU渲染，因此不需要重绘，就像3D图形一样。这个转换是单独处理的。

CSS的transform在GPU直接创建一个新的层。 （Chrome的DevTools的“Show layer borders”选项可以查看那些是单独的层。）

场景

以下几种情况会产生新的层

• 3D 或者 CSS的transform属性

• <video> 和 <canvas> 元素

• CSS的filter属性

• 覆盖在其它元素之上的元素，比如通过z-index提升层级

以下css属性会使用GPU加速提升性能

• transform

• opacity

• filter

存在的问题

内存：GPU处理过多的内容会导致内存问题。这在移动端和移动端浏览器会导致崩溃。因此，通常不会对所有的元素使用硬件加速。

字体：在GPU渲染字体会导致抗锯齿无效。这是因为GPU和CPU的算法不同。