如需转载此文，请与“神光的编程秘籍”公众号联系。当我们使用 HTML 和 CSS 来描述一个网页时，浏览器会解析这些代码，并逐帧进行渲染。当使用 JavaScript 修改 DOM 结构后，浏览器会重新计算布局信息，并进行新一轮的渲染。

dom 的改变可以分为高频和低频。例如，动画的样式改变需要高频处理，而现代浏览器都支持通过 GPU 进行硬件加速渲染。那么如何综合考虑高频计算和低频计算、CPU 渲染和 GPU 渲染呢？浏览器在渲染页面时，会使用多个图层来呈现，

的解答就是其中一个图层（Layer）。最终，这些图层会被合并（Composite），形成一帧完整的图像。哪种格式可以创建新的图层？

你可能听说过使用 3D 变换会创建新图层，使用 will-change 会创建新图层等等，但是否真的创建了新图层心中未必有底。

其实无需记住任何样式就可以创建图层。我要推荐给大家的是 Safari Devtools 的 Layers 工具，这是一个非常好用的图层分析工具。

没错，我说的是safari，不是chrome devtools。在图层分析方面，chrome devtools做得不太好，具体情况我会在后面解释。首先，要启用 Safari 的 DevTools 中的图层分析工具，需要手动打开 DevTools：\n1. 首先，打开 Safari 浏览器。\n2. 在菜单栏中选择 "开发" > "显示Web检查器"，或者使用快捷键 Command + Option + I。\n3. 打开 Web 检查器后，点击右上角的 "更多选项"（三个竖点图标）。\n4. 在下拉菜单中选择 "显示图层"，确保该选项被勾选。\n现在，可以看到 DevTools 中的图层分析工具。在图层分析工具中，可以查看页面中的各个图层，例如在掘金网站页面中显示的图层。

右侧的三个按钮分别是用来显示边框、在绘制时显示红色背景以及显示页面中所有图层，需要全部勾选。

选项可以在每个图层周围添加绿色边框，让用户清楚地看到哪些区域是独立渲染的。

功能将在右侧列出页面上的所有图层，并显示这些图层的根元素。页面上共有7个图层，它们共占用了47M的内存。每当

绘制时显示红色背景，都会闪烁一下，让观众感受到新一帧的渲染效果。像这个 gif 一样：

接着，关键问题是，为什么要创建这些图层呢？是哪种风格造成的呢？点击每个图层，您都可以看到创建该图层的原因！

像是html这样的标签，因为它是根元素创建的图层，这是显而易见的事实。侧边栏出现了因为其子元素中有 z-index 被设置为负值，从而创建了一个新的图层。

导航栏被创建为三个原因的层叠：元素包含3D转换、带有position:fixed样式，以及元素有可能被其他元素重叠。在进行3D转换时会创建图层，这是因为它会利用GPU进行计算和渲染；使用position:fixed也会创建图层，因为它脱离了文档流，与其他元素重叠的情况也会创建图层，这是因为重叠会导致一个图层无法完整渲染，所以需要单独渲染到一个专门的图层。看起来像是因为 `will-change` 属性并没有导致新建图层？那我们来试试看，找一个元素加上 will-change 的样式：\n看，绿框出现了，这表示新建了一个图层。我们去 Layers 标签页看一下原因。图层结构由7个变为8个。只有在含有 opacity、transform、transform-style、perspective、filter、backdrop-filter 这六个属性值时，will-change属性才会创建新的图层。也许大家都不知道这一点，因为layers 工具已经直接提示了。

我们总结一下导致图层创建的原因： \n- 包含根元素 \n- 存在 z-index 为负值的子元素 \n- 使用了 3D 转换 \n- 使用了 position：fixed \n- 与其他元素可能重叠 \n- 使用了 will-change 样式，值为 opacity、transform、transform-style、perspective、filter、backdrop-filter 中的一个

\n当然，这些无需记忆，通过 Safari 开发工具直接分析图层即可找出原因。

还有

同时，可以清晰地看到图层之间的上下关系：

这是不是非常方便呢！再次来谈谈 Chrome DevTools，为什么不试试它呢？

 

因为它实在太不方便了。Chrome Devtools 的图层分析工具并不是我故意批评 Chrome Devtools 的 Layers 工具，确实有一些不尽如人意：首先，界面比较粗糙，尤其是在显示所有图层时，没有展示图层总数以及占用的内存，也无法直接跳转至元素。Safari Devtools 并不如 Safari 的图层调试工具。最主要的问题在于不能清晰显示图层创建的原因，显示信息不够友好，甚至有些情况下原因都没显示。总体来看，在图层调试工具方面，Safari Devtools 是更胜一筹的。

毫无疑问，Chrome Devtools 在与其他调试工具相比仍然非常出色。当然，Chrome DevTools 在其他调试工具中仍然表现出色。Safari DevTools 在图层调试方面确实非常出色，就像个人能力的发展一样，不必在每个方面都表现出众，但一定要在某一方面有突出的亮点，这样才能保持竞争力。

离题了，停。 指出

浏览器利用图层来管理渲染不同元素。进行

3D转换可能导致创建图层，当元素重叠时也可能发生，甚至设置will-change的特定值也会触发创建图层等情况。Safari Devtools 可以轻松用来分析具体页面上的图层，包括了哪些以及图层创建的原因是什么。Chrome开发者工具也提供了Layers工具，但正如标题所述，在CSS图层分析方面，Chrome开发者工具表现得并不是很好。这个数字序列中，x、n和p分别代表不同的数字。