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

Heather Mahan

Twitter 首页

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

我们新增了以下功能：

• 集成的 JavaScript 性能分析器。（包括火焰图！）
• Frame Viewer，帮助您直观呈现合成图层。
• 绘制性能分析器，可对浏览器的绘制活动进行详细深入分析。

请注意，使用本文中所述的 Paint 捕获选项确实会产生一些性能开销，因此请仅在需要时才启用这些选项。

集成式 JavaScript 性能分析器

如果您曾经浏览过 Profiles 面板，那么您可能比较熟悉 JavaScript CPU 性能分析器。此工具衡量 JavaScript 函数中的执行时间花在了何处。通过使用火焰图查看 JavaScript 配置文件，您可以直观呈现 JavaScript 处理随时间的变化情况。

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

除了 JavaScript 性能分析器之外，我们还在 Timeline 面板中集成了火焰图视图。现在，您能够以传统的事件瀑布流或火焰图查看应用活动。“火焰图”图标可让您在这两种视图之间切换。

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

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

帧查看器

层合成是浏览器的另一个方面，大部分开发者一直看不到它。谨慎使用时需谨慎，图层有助于避免昂贵的重新绘制，从而显著提升性能。但预测浏览器如何合成您的内容通常并不容易。使用时间轴的新 Paint 捕获选项，您可以在记录的每个帧上直观呈现合成图层。

当您选择 Main Thread 上方的灰色框架栏时，其 Layers 面板会提供一个构成应用的层的视觉模型。

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

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

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

绘制性能分析器

最后但同样重要的一点是，我们添加了绘制性能分析器，以帮助您识别由昂贵的绘制引起的卡顿。此功能可提供有关 Chrome 在绘制事件期间执行的工作的更多详情，从而丰富时间轴。

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

预览浏览器使用 Paint 捕获选项绘制的像素。

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

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

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

商家资料和利润！

当谈到性能优化时，浏览器方面的知识可能非常强大。通过这些时间轴更新，您可以大致了解代码与 Chrome 渲染流程之间的关系。试用时间轴中的这些新选项，看看 Chrome 开发者工具能做些什么来增强查找卡顿的工作流程！