css3 硬件加速

概念

• CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，
  减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS
  属性不会触发 repaint，所以能大大提高网页的性能

触发硬件加速的属性

• will-change： 哪一个属性即将发生变化，进而进行优化
• transform
• opacity
• filter

带来的问题

• 不能让每个元素都启用硬件加速，这样会暂用很大的内存，使页面会有很强的卡顿感
• GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。

硬件加速的原理

• 浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中 transform是不会触发 repaint 的，这一点非常类似3D绘图功能，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。