CSS3 硬件加速简介
CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能。
先看个demo页面示例，左边元素的动画通过 left/top 操作位置实现，右边元素的动画通过 transform: translate 实现，你可以打开 chrome 的 “Paint flashing” 查看，绿色部分是正在 repaint 的内容。
从 demo 中可以看到左边的图形在运动时外层有一圈绿色的边框，表示元素不停地 repaint，并且可以看到其运动过程中有丢帧现象，具体表现为运动不连贯，有轻微闪动。
动画与帧
之前学习 flash 的时候，就知道动画是由一帧一帧的图片组成，在浏览器中也是如此。我们首先看一下，浏览器每一帧都做了什么。
- JavaScript：JavaScript 实现动画效果，DOM 元素操作等。
- Style（计算样式）：确定每个 DOM 元素应该应用什么 CSS 规则。
- Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow。
- Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
- Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。
动画与图层
浏览器在获取 render tree（详细知识可以查看Web性能优化-页面重绘和回流（重排））后，渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到 GPU 形成渲染纹理。GPU 中 transform 是不会触发 repaint 的，这一点非常类似 3D 绘图功能，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。
过程如下：
render tree -> 渲染元素 -> 图层 -> GPU 渲染 -> 浏览器复合图层 -> 生成最终的屏幕图像。
TIPS: chrome devtools 中可以开启 Rendering 中的 Layer borders 查看图层纹理。
其中黄色边框表示该元素有 3d 变换，表示放到一个新的复合层（composited layer）中渲染，蓝色栅格表示正常的 render layer。
在文章开始给出的例子中，我们也可以开启 Layer borders，可以观察到，使用 transform: translate 动画的元素，外围有一个黄色的边框，可知其为复合层。
在 GPU 渲染的过程中，一些元素会因为符合了某些规则，而被提升为独立的层（黄色边框部分），一旦独立出来，就不会影响其它 DOM 的布局，所以我们可以利用这些规则，将经常变换的 DOM 主动提升到独立的层，那么在浏览器的一帧运行中，就可以减少 Layout 和 Paint 的时间了。
创建独立图层
哪些规则能让浏览器主动帮我们创建独立的层呢？
6. 3D 或者透视变换（perspective，transform） 的 CSS 属性。
7. 使用加速视频解码的 video 元素。
8. 拥有 3D（WebGL） 上下文或者加速 2D 上下文的 canvas 元素。
9. 混合插件（Flash)。
10. 对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素。
11. 拥有加速 CSS 过滤器的元素。
12. 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)。
13. 元素有一个兄弟元素在复合图层渲染，并且该兄弟元素的 z-index 较小，那这个元素也会被应用到复合图层。
关于 z-index 导致的硬件加速的问题，可以查看这篇文章 CSS3硬件加速也有坑！！
开启 GPU 加速
CSS 中的以下几个属性能触发硬件加速：
14. transform
15. opacity
16. filter
17. will-change
如果有一些元素不需要用到上述属性，但是需要触发硬件加速效果，可以使用一些小技巧来诱导浏览器开启硬件加速。
CSS
.element {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/或者/
transform: rotateZ(360deg);
transform: translate3d(0, 0, 0);
}
注意：我在不同的资料中查到的 transform 是否能触发硬件加速的结果不同，自己测试后，发现结果是可以。
要注意的问题
（1）过多地开启硬件加速可能会耗费较多的内存，因此什么时候开启硬件加速，给多少元素开启硬件加速，需要用测试结果说话。
（2）GPU 渲染会影响字体的抗锯齿效果。这是因为 GPU 和 CPU 具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。
参考文章
• Increase Your Site’s Performance with Hardware-Accelerated CSS
• 用CSS开启硬件加速来提高网站性能
• css3硬件加速
• CSS3硬件加速也有坑！！
• GPU加速是什么
• 使用CSS3 will-change提高页面滚动、动画等渲染性能
