在 Web Inspector 中可视化层

Safari 技术预览版最近的版本包含 Web Inspector 的一项新的实验性功能：层（Layers）选项卡。此选项卡在旧版 层侧边栏 的基础上，引入了被检查页面的合成层的 3D 可视化，旨在为开发人员提供一种更直观（且有望更有趣！）的方式，来理解层是如何生成以及以何种顺序渲染的。

在这篇文章中，我们将探讨如何使用“层”选项卡来查找网页上意外的内存消耗或过多的重绘。

层功能速览

在介绍任何调试工具之前，首先明确我们要调试什么非常重要。乍一看，层可视化可能与 DOM 可视化（例如 Firefox 的 Tilt）非常相似，但合成层和 DOM 元素在概念上是不同的实体。虽然 Web 开发人员对 DOM 树作为页面元素结构非常熟悉，但这些元素最终如何在屏幕上渲染的方式通常只有在需要时才会被了解。

DOM 元素并非逐个绘制到屏幕上。在计算出每个元素的位置和大小后，它们会被绘制到一系列称为“层”的表面上。然后，这些层会按照特定顺序进行合成，以生成网页的最终外观。所有页面都有一个与文档本身对应的根层，但任何 DOM 元素都可能导致创建新层。这其中的原因包括元素类型（例如 <canvas>）、某些 CSS 属性的存在（例如 3D 变换）或与其他层生成元素的交互。

层对渲染性能有显著影响。如果没有层，动画化任何元素（例如，标题向下滑动）都将意味着在每一帧上都必须浪费地重绘整个页面。然而，如果元素有自己的层，则可能完全跳过重绘，只需通过在屏幕上重新合成层来执行动画。当然，这种计算节省的代价是内存成本。创建过多的层——无论是故意的还是无意的——都可能对内存受限的设备造成灾难性的后果。像任何性能问题一样，找到正确的平衡是一个经验问题，因此拥有合适的调试工具至关重要！

使用“层”选项卡识别合成问题

“层”选项卡提供了页面上层的两种实时表示形式：3D 可视化和数据表。我们可以结合使用它们来发现潜在的性能问题。

我们可以首先探索可视化视图，以了解每个层的位置、大小和渲染顺序。要导航，请使用左键拖动进行旋转，右键拖动进行平移，以及滚动进行缩放。在可视化视图中点击一个层会突出显示层表中对应的行。

然后，我们可以使用表格来识别开销最大的层，通过“内存”（Memory）排序以优先考虑内存消耗（默认），或通过“绘制”（Paints）排序以优先考虑重绘次数。在表格中选择一行会显示有关该层存在原因及其合成尺寸和可见尺寸的信息（分别以轮廓和平面形式可视化）。这还会将可视化视图重新居中到所选内容，从而阐明该层如何融入整体视图。

此时，我们可能会注意到附近有一个位置异常的层并相应地跳转到它。或者我们可以简单地依次检查每个开销最大的层。如果某个层看起来可疑，我们可以点击其表格行中的箭头图标，切换到“元素”（Elements）选项卡并检查生成它的 DOM 元素。如果这不足以解释异常高的重绘次数，我们可以转向“时间轴”（Timelines）选项卡，以查明这些绘制事件是在何处触发的。

一旦我们确定了问题，就只需要进行适当的 HTML/CSS 修改了！

反馈

“层”选项卡在最新的 Safari 技术预览版中可用。要启用它，请访问 Web Inspector 的“设置”（Settings）选项卡上的“实验”（Experimental）面板，并勾选“启用层选项卡”（Enable Layers tab）设置。快来试用并告诉我们您的想法！您可以通过 Freenode IRC 上的 #webkit-inspector、Twitter 上的 @webkit 或提交错误报告与我们联系。