开发者工具时间轴 - 现在可以提供完整说明

Heather Mahan

开发者工具的 Timeline 面板始终是性能优化之路上的第一站。这种集中式的应用活动概览有助于您分析哪些时间花在加载、编写脚本、渲染和绘制等操作上。最近，我们升级了时间轴，增加了更多插桩功能，以便您更深入地了解应用的性能。

我们添加了以下功能：

• 集成的 JavaScript 性能分析器。（包括火焰图！）
• 框架查看器，帮助您直观呈现合成的图层。
• 绘制分析器，深入了解浏览器的绘制活动。

请注意，使用本文中介绍的绘制捕获选项确实会产生一些性能开销，因此请仅在需要时才打开它们。

集成式 JavaScript 性能分析器

如果您熟悉配置文件面板，可能比较熟悉 JavaScript CPU 性能分析器。此工具会衡量执行时间花费在 JavaScript 函数中的什么位置。通过火焰图查看 JavaScript 配置文件，您可以直观地查看一段时间内 JavaScript 处理情况。

现在，您可以在时间轴面板中查看 JavaScript 执行情况的这种精细的细分数据。通过选择 JS Profiler 捕获选项，您可以在时间轴中查看 JavaScript 调用堆栈以及其他浏览器事件。将此功能添加到时间轴有助于简化调试工作流程。除此之外，它让您可以在上下文中查看 JavaScript，并确定影响网页加载时间和呈现的代码部分。

除了 JavaScript 性能分析器之外，我们还将火焰图视图集成到了时间轴面板中。现在，您能够以经典的事件瀑布或火焰图的形式查看应用的活动。火焰图图标可让您在这两种视图之间切换。

使用 JS 性能分析器捕获选项和火焰图视图在时间轴中调查调用堆栈。

注意：使用 WASD 来缩放和平移火焰图。按住 Shift 键并拖动鼠标可绘制选择框。

帧查看器

层合成的艺术是浏览器的另一方面，开发者通常对这一方面做不到。谨慎使用图层时，使用层有助于避免成本高昂的重新绘制，从而大幅提升性能。但是，预测浏览器将如何合成您的内容通常并不明显。借助 Timeline 的新 Paint 拍摄选项，您可以直观呈现录制的每一帧中的合成图层。

选择 Main Thread 上方的灰色框架栏后，其 Layers 面板会提供组成应用的图层的可视化模型。

注意：通过点击时间轴记录上的帧栏来播放动画。

您可以缩放、旋转和拖动图层模型，探索其内容。将鼠标悬停在图层上即可显示该图层在页面上的当前位置。右键点击图层可以跳转到元素面板中的相应节点。这些地图项会向您显示升级到图层的内容。如果您选择了某个图层，则还可以在合成原因行中查看升级原因。

查看 Codrops 的散射拍立得图库中的图层，了解浏览器进行合成的原因。

绘制性能分析器

最后同样重要的一点是，我们添加了绘制分析器，以帮助您识别因绘制开销高昂而导致的卡顿。此功能利用有关 Chrome 在绘制事件期间所做工作的更多详细信息来丰富时间轴。

对于初学者，现在可以更轻松地识别与每个绘制事件对应的视觉内容。在时间轴中选择绿色绘制事件后，详细信息窗格会显示已绘制的实际像素的预览。

预览浏览器使用绘制拍摄选项绘制的像素。

如果您确实想深入了解，请切换到 Paint Profiler 窗格。此性能分析器会显示浏览器为所选绘制执行的确切绘制命令。为了帮助您将这些原生命令与应用中的实际内容关联起来，您可以右键点击 draw* 调用，然后直接跳转到 Elements 面板中的相应节点。

使用 Paint Profiler 将原生浏览器 draw 调用与 DOM 元素相关联。

通过窗格顶部的迷你时间轴，您可以回放绘制过程，并了解浏览器执行哪些操作的成本高昂。绘制操作的颜色编码如下所示：粉色（形状）、蓝色（位图）、绿色（文本）和紫色（其他）。条形的高度表示通话时长，因此调查高高的柱形有助于您了解特定绘制的成本很高。

分析和盈利！

就性能优化而言，了解浏览器是非常强大的。这些时间轴更新可让您一探究竟，从而帮助阐明您的代码与 Chrome 呈现进程之间的关系。试试 Timeline 中的这些新选项，看看 Chrome 开发者工具可以做些什么来改进您的卡顿搜寻工作流！