1。 黄色边框：有动画 3d 变换的元素，表示放到了一个新的复合层(composited layer)中渲染
2。 蓝色的栅格：这些分块可以看作是比层更低一级的单位，这些区域就是 RenderLayer
打开一个页面，如果该页面的黄色边框很多，那么肯定要查看一下原因了
Chrome 查看 layer
打开 timeline 进行录制，选中 timeline 的某一帧，然后选择下面的 layer ，可以左右拖动该模块出现 3d。
我们可以看到一个页面实际是像下面一样组成的
从上图不难理解，虽然我们最终在浏览器上看到的只是一个复印版，即最终只有一个层。类似于PhotoShop软件中的“图层”概念，最后合并所有可视图层，输出一张图片到屏幕上。但实际上一些dom会因为一些规则被提升成独立的层(开启 GPU 加速)，一旦被独立出来之后，便不会再影响其他dom的布局，因为它改变之后，只是“贴上”了页面。
根据这个优点，我们可以把页面中一些布局经常变换的dom(动画)提升到独立的层。那么，浏览器在之后的 16ms 中，只需进行下面的几个步骤。
三。 如何开启 GPU 加速?
目前下面这些因素都会引起Chrome创建合成层：
1。 3D 或透视变换(perspective，transform) CSS 属性
2。 使用加速视频解码的video元素
3。 拥有 3D (WebGL) 上下文或加速的 2D 上下文的 canvas 元素
4。 混合插件(如 Flash)
5。 对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素
6。 拥有加速 CSS 过滤器的元素
7。 元素A有一个 z-index 比自己小的元素B，且元素B是一个合成层(换句话说就是该元素在复合层上面渲染)，则元素A会提升为合成层。
上面7点都非常容易理解，在日常开发中，最容易出现问题的是第7点
四。 GPU 加速隐藏的坑–隐式合成
元素A有一个 z-index 比自己小的元素B，且元素B是一个合成层(换句话说就是该元素在复合层上面渲染)
拿实际项目举个栗子，我们按照上面的步骤开启 layer borders
尚未给上图右手添加高层级的 z-index 时，整个页面在移动端打开后闪退。而添加了 z-index 之后，页面正常显示，不闪退了。
仔细看上面的 gif ，仅仅改变了 z-index ，就会改变大批数量的层(黄色边框)
为什么 z-index 力量这么大?
我们来看一个栗子，B 在做动画，理所当然把B提到单独的合成层。减少重绘。
按照上图，我们遇到一个逻辑问题，元素B应该在单独的合成层上，并且屏幕的最终图像应该在 GPU 上组成。但是A元素在B元素的顶部，我们没有指定提升A元素自身层级的东西。那么浏览器会做什么?它将强制为元素A创建一个新的合成图层。
这样，A和B都被提升到单独的复合层。
因此，使用 GPU 加速提升动画性能时，最好给当前动画元素增加一个高一点的 z-index 属性，人为干扰复合层的排序，可以有效减少 Chrome 创建不必要的复合层，提升渲染性能。
注意：GPU 不仅需要发送渲染层图像到 GPU ，而且还需存储它们，以便稍后在动画中重用。别盲目创建渲染层，一定要分析其实际性能表现。因为创建渲染层是有代价的，每创建一个新的渲染层，就意味着新的内存分配和更复杂的层的管理。对于使用移动设备的用户来说是很坑的。移动设备没有台式机那么多的内存。过多的 GPU 加速会引起页面卡顿甚至闪退。
找到 layers，点击当前层，在右边查看占用的 memory(内存)
- 看不过瘾？点击下面链接！
- 1299元Ryzen 5 1400开盖上手怎么样
- 8核心AMD Ryzen 1700开箱全面上手体验评测
- AMD Ryzen5 1600X内存实测怎么样
- Ryzen 5整机组装教程 AMD Ryzen5 1600X整机性能测试
- Ryzen 5新3A四核游戏装机性价对比评测
- Win8在哪里打开控制面板？
