Web Inspector 中的 CPU 时间线

Web Inspector 现在包含一个新的 CPU 使用时间线，它允许开发者测量页面的 CPU 使用情况，估算其能耗影响，并更轻松地调查可能导致能源利用率低的脚本执行来源。

能源效率

用于生产力和娱乐的 Web 应用程序随处可见。对于许多用户来说，流行的网站经常在浏览器前台打开，或在后台选项卡中不活跃地停留很长时间。所有这些页面上的活动都可能导致电量消耗。许多用于浏览网页的设备都是电池供电的。对于所有这些用户来说，电池续航时间至关重要！

确保 Web 应用程序充分利用有限的资源是一个难题。拥有强大的工具集使开发者更容易调查和识别性能问题。许多不同的变量会影响网页的能耗，但最突出的是 CPU 活动。监控 CPU 使用情况可以提供网页能源效率的总体估算，并在活动过高时提醒关注。

CPU 时间线

新的 CPU 使用时间线默认启用。打开 Web Inspector 的时间线（Timelines）选项卡，您会在顶部概览中看到一个新的 CPU 时间线。选择该时间线以显示其详细视图，其中包括主线程活动的细分、能耗影响评级等。

CPU 时间线概览显示每 500 毫秒采样的 CPU 使用情况。您可以使用这些样本来可视化活动峰值，以及它们与网络、布局和渲染以及 JavaScript 的关联。要查看录制中特定部分的 CPU 使用情况详细概览，请点击并拖动以进行时间范围选择。

主线程细分

详细视图的第一部分是主线程上正在执行的工作的细分。虽然所有线程的总 CPU 使用率都很重要，但主线程上执行的工作对于 Web 内容尤其重要。

评估脚本、绘制、布局和样式解析等主要任务都在主线程上执行。该图表允许您快速比较这些类别中时间花费的分布。

主线程主要活跃是为了处理用户交互事件，例如滚动、点击或轻触页面。这意味着主线程可能存在不活动的时间段。图表中的数字显示主线程活跃的近似毫秒数。这个数字可能远小于概览中选择的总时间范围。

不同的交互会产生不同的主线程工作负载。例如，滚动页面会增加绘制时间，调整窗口大小会导致额外的布局，而在表单中键入可能会执行脚本。

能耗影响

能耗影响（Energy Impact）部分提供页面导致的电池消耗估算。这基于所选时间范围内的平均 CPU 使用率。

长时间高 CPU 利用率将显示“高（High）”能耗影响，因为持续高 CPU 使用率会消耗电量并对电池续航时间产生显著影响。使用此部分时，有两个重要的场景需要考虑和测量：

• 空闲录制 – 空闲页面可以是用户未交互地在前台停留的页面，也可以是仍然活跃的后台选项卡。重要的是，空闲页面应尽可能少地使用能源和 CPU。空闲页面的录制应力求获得“低（Low）”评级（平均 CPU 使用率低于 3%）。
   

• 交互式录制 – 包含导航、滚动、点击、输入等交互的录制，应该预期更高的 CPU 使用率，因为页面正在响应用户。交互期间应力求保持“中（Medium）”评级（平均 CPU 使用率低于 30%），并尽可能避免“高（High）”评级。

虽然 WebKit 会努力限制计时器并减少后台选项卡或被遮挡内容的影响，但空闲页面仍可能执行耗时的工作。同样，持续执行脚本（如计时器或过度事件处理）的前台页面可能会在没有任何明显迹象的情况下耗尽电池电量。

选择足够大的时间范围很重要，这样单次 CPU 活动峰值就不会主导平均值。例如，页面加载时会短暂地使用非常高的 CPU 活动，因为下载和渲染页面的初始成本很高。在页面加载期间或用户与页面交互期间选择较短的时间范围，可能会显示较高的能耗影响，但如果使用不是持续的，则可能不会耗尽电池电量。正常的浏览场景在加载之间有空闲时间，用户可以阅读或更慢地与页面内容交互。选择 15 秒或更长的时间范围将比短时间选择产生更真实的电池消耗估算。

按线程详细信息

详细视图的中心包含一个按线程细分的较大 CPU 使用图。图例显示了主线程、工作线程和其他线程的不同颜色。将鼠标悬停在图表上，您可以获取最近样本的精确值。图表下方是主线程指示条。这显示了主线程活动的每个独立样本。点击此条将直接带您到该时间点在事件相关时间线中发生的事件。

要获取按单个线程和线程组进行更详细的细分，您可以展开下方的线程（Threads）部分。主线程和工作线程将单独绘制图表，其余线程则进行分组。WebKit 线程包括任何执行 WebKit 已知工作的线程，例如垃圾回收、JIT 编译、bmalloc scavenger 等。任何剩余线程上的 CPU 使用率都被放入未分类组中。

统计和来源

这些部分提供了对所选时间范围内页面上发生的活动的更详细的见解。

统计（Statistics）部分枚举了页面上发生的各种活动及其各自的频率。活动包括网络请求以及通过计时器、事件或观察器回调进入脚本。这些值按频率排序，因此您可以立即看到最常发生的活动，这些活动可能需要调查。

来源（Sources）部分精确指出并聚合了脚本入口的来源。这包括计时器安装、事件处理程序和观察器处理程序。值再次按频率排序，因此您可以立即看到最热的入口点。对于计时器，我们包含安装计时器的函数名称。这使得检测和调查意外的计时器注册变得容易。

这两个部分协同工作，构成了一个强大的调试工具。可以从统计（Statistics）部分选择脚本入口的类别，然后来源（Sources）部分将过滤以显示相应的脚本入口点。例如，通过选择 requestAnimationFrame，来源列表将立即过滤，仅显示动画计时器安装。再点击一次，您就可以跳转到相关代码并设置断点以进行进一步调试。

时间线导入和导出

Web Inspector 现在支持导入和导出时间线录制。现在，当您捕获性能问题的录制时，您可以导出该录制以与他人共享、附加到错误报告或仅保存以供以后分析。

导入和导出适用于所有时间线。这使其适用于各种性能分析，而不仅仅是新的 CPU 时间线。如果您捕获的录制具有有趣的 JavaScript 和事件配置文件，或者具有显示内存泄漏的 JavaScript 分配堆快照，那么在这些情况下，导出和导入都将非常有效。

反馈

您可以在最新的 Safari 技术预览版中试用新的 CPU 使用时间线。请告诉我们它对您来说效果如何。请继续关注即将发布的关于节能 Web 内容最佳实践的博客文章。请在 Twitter（@webkit、@JosephPecoraro）上发送反馈或提交错误报告。