reference: https://lz5z.com/Web%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-CSS3%E7%A1%AC%E4%BB%B6%E5%8A%A0%E9%80%9F/
CSS3硬件加速，又叫GPU加速，是利用GPU进行渲染减少CPU操作的一种优化方案。由于GPU中的transform等CSS属性不会触发repaint，所以能大大提高网页的性能。
Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。
一些情况下并不需要对元素应用3D变换的效果，可以使用小技巧“欺骗”浏览器来开启硬件加速。虽然可能不想对元素应用3D变换，可我们一样可以开启3D引擎，例如可以用transform: translateZ(0); 来开启硬件加速 。
transform是如何让动画不会导致重绘的呢？transform会直接使用硬件加速，在GPU中运行，绕开了软件渲染。
transform:translateZ(0);
浏览器自身也提供了优化的功能，这也就是will-change属性。这个功能允许你告诉浏览器这个属性会发生变化，因此浏览器会在开始之前对其进行优化。
例子：
.example{will-change: transform;}
当我们使用CSS transform或者animation时可能会有页面闪烁的效果，下面的代码可以修复此情况：
.demo {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
backface-visibility: hidden; 表示隐藏被旋转的背面；
perspective: 1000; 定义3D元素距视图的距离
.cube {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
css3哪些新属性会触发新的图层，为什么会设计新的图层？
在以下情况会产生新的层：
3D或者CSS的transform属性
<video> 和 <canvas> 元素
CSS的filter属性
覆盖在其它元素之上的元素，比如通过z-index提升层级
3D转换和2D转换的不同在于是否提前生成新的层，如果是2D的话是在实行的时候。在动画开始的时候，一个新的层被创建，并且被传入GPU处理。当动画结束，独立的层被移除，结果被重新绘制。
并不是所有的CSS属性变化都会直接在GPU处理。只有下面的属性会这样处理：
CSS 中的以下几个属性能触发硬件加速：
transform
opacity
filter
will-change