在Css层分析方面，ChromeDevtools确实做的不是很好。转载本文请联系神光编程秘籍公众号。我们通过html和css来描述页面，浏览器会解析并逐帧渲染。通过js改变dom后，浏览器会重新计算布局信息，然后渲染。DOM变化可以分为高频和低频。比如动画需要高频变换样式，现代浏览器支持通过GPU计算加速渲染（硬件加速）。如何整合高频计算和低频计算，CPU渲染和GPU渲染什么的？答案是Layer，浏览器会通过不同的层进行渲染，最后将层合并（Composite）成一帧图像。那么什么样式会创建一个新层呢？你可能听说过使用3Dtransform会创建一个新层，使用will-change会创建一个新层等等，但是你并不知道是否真的创建了一个新层。事实上，不需要记住什么样式会创建图层。给大家分享一个强大的图层分析工具：SafariDevtools的Layers工具。没错，确实是Safari，不是Chromedevtools。chromedevtools不太擅长层分析，具体情况以后再说。SafariDevtools的图层分析工具首先需要手动打开Safari的Devtools：打开Devtools，这个图层就是今天的主角：以掘金为例：中间区域展示了页面中的图层。右边的三个按钮分别是显示边框，绘制时显示红色背景，显示页面中的所有图层，都勾选上。Showborder是给每一层添加一个绿色的边框，可以直观的看到哪些区域是在单独的层中渲染的。显示页面中的所有图层会在??右侧列出页面中所有图层的根元素。可以看到页面上有7层，这些层占用了47M内存。绘图时显示红色背景意味着每渲染一帧就会闪烁一次，让人感觉好像在渲染新的一帧。例如下面的gif：那么，重要的一点是，为什么要创建这些层？是什么风格造成的？点击每一层，就可以看到创建该层的原因了！比如html，因为它是根元素创建的层，没什么好说的。侧边栏是一个创建的层，因为它有带负z-index值的子层。导航栏是出于3个原因创建的层：元素具有3D变换，它具有position:fixed样式，并且元素可能与其他元素重叠。3D转换将创建图层，因为GPU将用于计算和渲染；position:fixed会创建层，因为它脱离了文档流，很容易理解与其他元素重叠会创建层。Overlapping，一张图片Layers是无法渲染的，所以它们是分层渲染的。好像没有创建will-change引起的新层？那我们试试吧。我们找一个元素，添加will-change的样式：看，绿框显示出来了，代表新建了一个图层。让我们去图层看看为什么。层数从7个变成了8个，原因是will-change：will-change只会在有opacity,transform,transform-style,perspective,filter,6个属性值时才会创建新层和背景过滤器。这一点大家可能不知道，图层工具直接提示。我们来梳理一下导致图层创建的原因：根元素有z-index，负值的子元素3D转换位置：固定，其他元素可能重叠。will-changestyle的取值是opacity,transform,transform-style,perspective6,filter,backdrop-filter中的一个，当然这些根本不需要记忆，直接解析图层就可以了SafariDevtools的原因。而且层与层之间的上下关系也能直观看出：是不是超级方便！回头再说说ChromeDevtools，为什么不用呢？因为真的不好用。ChromeDevtools的图层分析工具不是我故意黑了ChromeDevtools的Layers工具，真的不好用：首先界面丑，尤其是所有图层显示的地方，总图层数和内存占用不显示，不能直接跳转元素方面，这点不如SafariDevtools：与Safari相比：最重要的是不显示图层创建的原因：显示的信息不友好不够：有的甚至不显示原因：综合来说，在图层调试工具方面，SafariDevtools胜出！当然，ChromeDevtools在其他调试工具中还是很不错的。SafariDevtoos在层调试工具上确实很亮眼，就像我们的能力开发一样，不需要每一个方面都很强，但一定要有一个方面比较突出，这样才能更有竞争力。拉开，关闭。总结浏览器使用层来组织不同元素的渲染。3D变换导致图层创建，元素重叠导致图层创建，某些值的will-change导致图层创建，等等。可以使用SafariDevtoos轻松分析特定页面上有哪些层以及创建层的原因。ChromeDevtools也有一个Layers工具，不过正如标题所说，ChromeDevtools在css层分析方面确实不擅长。
