Web Inspector 参考层级面板

在计算出每个 DOM 节点的位置和大小后，它们会被绘制到一系列称为“层”的表面上，然后这些层会以特定顺序进行合成，以生成网页的最终外观。所有页面都有一个与文档本身对应的根层，但任何 DOM 节点都可以导致创建新的层。

层级对渲染性能有显著影响。如果没有层级，动画化任何 DOM 节点都意味着需要在每一帧都浪费性地重绘整个页面。然而，如果 DOM 节点有自己的层级，则可能完全跳过重绘，而是简单地在屏幕上重新合成这些层级。但这些计算节省的代价是内存消耗。创建过多的层级（有意或无意）可能会对内存受限的设备产生灾难性后果。

可视化层级

主内容区包含一个对被检查页面层级树的实时交互式可视化。

• 点击并拖动以旋转
• 右键点击（或 ⌃-点击）并拖动以平移
• 滚动以缩放

理解层级

每个层的基本信息显示在详情侧边栏中的所有层面板中，例如累积绘制次数和内存开销。

在详情侧边栏的所有层面板中选择一行，或在主内容区中点击任何可视化的层，都将显示所选层的信息，例如其尺寸以及创建该层的一个或多个原因。

点击任何层的跳转箭头，将在元素面板的DOM 树中显示该层对应的节点。

调试层级

主内容区顶部有一些开关，可以帮助识别层级问题。

• [显示合成边框] 将绘制边框并指示每个层的重绘次数。

• [启用绘制闪烁] 将使层在重绘时短暂闪烁红色。

所有这些开关也可在元素面板的主内容区顶部找到。

此外，在元素面板的DOM 树中右键点击任何节点并选择在层级面板中显示，将跳转到层级面板，找到该节点所属的层，并在主内容区和详情侧边栏的所有层面板中选中它。