重排重绘与GPU加速

重排重绘

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

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

• 添加或删除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直接创建一个新的层。
（C