GPU加速有坑？

大多数人都知道有动画的地方可使用GPU来加速页面渲染。例如，作优化的时候，将使用left和top属性的动画修改为使用transform属性的CSS动画。或者听到别人教你使用transform:translateZ(0）给有动画的部分额外开启GPU加速。

 

目前下面这些因素都会引发chrome建立层：

1. 3D 或透视变换(perspective，transform) CSS 属性
2. 使用加速视频解码的 <video> 元素
3. 拥有 3D (WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素
4. 混合插件(如 Flash)
5. 对本身的 opacity 作 CSS 动画或使用一个动画 webkit 变换的元素
6. 拥有加速 CSS 过滤器的元素
7. 元素有一个 z-index 比本身小的兄弟节点，且该节点是一个合成层

上面6点都很是容易理解，在平常开发中，最容易出现问题的是第7点

 

隐式合成：元素有一个 z-index 比本身小的兄弟节点，且该节点是一个合成层，则该元素会建立层。

拿实际项目举个栗子，咱们按照上面的步骤开启layer borders 

 

还没有给上图右手添加高层级的z-index时，整个页面在移动端打开后闪退。而添加了z-index以后，页面正常显示，不闪退了。
仔细看上面的gif，仅仅改变了z-index，就会改变大批数量的层（黄色边框）

 

为何z-index力量这么大？

咱们来看一个栗子，B在作动画，理所固然把B提到单独的合成层（给B增长属性 transform:translateZ(0））。减小重绘。 

按照上图，咱们遇到一个逻辑问题，元素B应该在单独的合成层上，而且屏幕的最终图像应该在GPU上组成。可是A元素在B元素的顶部，咱们没有指定提高A元素自身层级的东西。那么浏览器会作什么？它将强制为元素A建立一个新的合成图层。

这样，A和B都被提高到单独的复合层。 所以，使用GPU加速提高动画性能时，最好给元素增长一个高一点的z-index属性，人为干扰复合层的排序，能够有效减小chrome建立没必要要的复合层，提高渲染性能。

 

找到layers，点击当前层，在右边查看占用的memory（内存）

 

注意：别盲目建立渲染层，必定要分析其实际性能表现。由于建立渲染层是有代价的，每建立一个新的渲染层，就意味着新的内存分配和更复杂的层的管理。而且在移动端 GPU 和 CPU 的带宽有限制，建立的渲染层过多时，合成也会消耗跟多的时间。

 

总结：

使用GPU提高动画性能时，尤为是用了轮播、动画loading的页面，最好给元素增长一个z-index属性，人为干扰复合层的排序，能够有效减小chrome建立没必要要的复合层，提高渲染性能。

 

更详细的内容可前往：https://aotu.io/notes/2017/04/11/GPU/