css硬件加速：
其实就是GPU 加速，是利用 [GPU] 进行渲染，减少 CPU 操作的优化方案
（由于 GPU 中的 transform 等 CSS属性不会触发 repaint，所以能大大提高网页的性能）
像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换
硬件加速原理:
浏览器首先页面解释成DOM树，DOM树和CSS让浏览器构建渲染树，渲染书包含渲染对象 【在页面中需要渲染的元素】
每一个渲染对象被分配到一个图层中，每一个图层被更新到GPU
这里的秘诀就在于通过transform的层会使用GPU渲染，因此不需要重绘，就像3D图形一样。这个转换是单独处理的。
浏览器创建这种层级的条件有以下几种:
1、3D / CSS的transform属性【transform，opacity，filter】
2、元素CSS的filter属性
3、覆盖在其它元素之上的元素，如通过z-index提升层级
因此，如果动画考虑性能，建议用以上CSS3来实现。
开启硬件加速
在一些情况下，我们并不需对元素应用3D变换的效果，那怎么办呢？
可以使用个小技巧“欺骗”浏览器来开启硬件加速（transform hack）。
例如：可以用transform: translate3d(0, 0, 0);
注意：
1、GPU处理过多的内容会导致内存问题。
（这在移动端和移动端浏览器会导致崩溃，所以通常不会对所有的元素使用硬件加速）
2、在GPU渲染字体会导致抗锯齿（-webkit-font-smoothing）无效。
这是因为GPU和CPU的算法不同。因此如果不在动画结束的时候关闭硬件加速，会产生字体模糊
