推出渲染帧时间线
对于现代 Web 应用程序的 Web 开发人员来说，能够衡量性能和识别瓶颈至关重要。随着复杂的脚本、对第三方 JavaScript 框架的依赖以及高性能动画成为常态，提供流畅的用户体验可能是一项挑战。当今大多数设备的显示器刷新率为 60 Hz，这意味着我们的应用程序需要以每秒 60 帧的速度持续更新。
Web Inspector 包含一个新工具，可帮助查找和解决渲染性能问题。除了熟悉的基于事件的时间线之外，“时间线”选项卡现在还包括一个“渲染帧”模式，这是一个新的时间线，它提供了现有分析器/仪器数据的基于帧的、特定于任务的视图。
事件循环
时间线中的每个帧代表浏览器“事件处理循环”的一个周期，并分解为在该时间段内执行的任务。在事件循环的一个周期中，浏览器必须：
- 处理事件和计时器
- 运行 JavaScript
- 执行样式计算和布局
- 绘制并合成页面
如果这些任务中的一个或多个花费了过多的时间，帧率就会下降，页面性能也会受到影响。为了保持每秒 60 帧的稳定帧率，每个帧的时间预算约为 16.667 毫秒，即 1/60 秒。
概述
帧数据显示在三个面板中：一个“概述图”、“记录表”和“摘要图”。图表面板（视图顶部）显示了渲染时间和长时间运行任务的高级概述。记录表（下半部分）显示了每个帧中发生的详细信息，而摘要图则显示了当前在时间线中选择的帧记录的总计时间。
渲染帧时间线沿 x 轴绘制离散帧；每个帧的高度对应其渲染所需的时间（越低越好）。这与 Web Inspector 中的其他时间线形成对比，其他时间线沿 x 轴绘制事件随时间的变化，并且没有 y 轴。
当没有脚本活动或布局更改需要渲染时，WebKit 的事件循环保持空闲。默认情况下，渲染帧时间线会自动隐藏这些空闲期，以便您可以轻松比较活动期。
上面的示例显示了一个从一个页面获取的配置文件，该页面每秒通过调用 `setInterval` 执行一些工作。根据“起始时间”列，每个帧相隔约一秒，并且帧之间的时间间隔——空闲时间——未显示。
识别性能问题
当网页内容渲染性能不佳时，这会显示为时间线中的高条形或“总时间”表列中值较大的帧。过滤器（将在下一节讨论）也可以帮助突出显示那些始终无法达到我们 60 FPS 目标的帧。下一步是确定哪些脚本或布局正在耗尽我们的帧预算。
过滤数据
在每秒渲染多达 60 帧时，复杂的网页内容可以快速生成大量记录，从而掩盖不常见但令人烦恼的掉帧。渲染帧时间线添加了两种新的过滤类型来帮助减少噪音：一个“任务过滤器”和一个“帧持续时间过滤器”。这两个过滤选项都位于“时间线”侧边栏面板中。
与所有时间线视图一样，记录表中仅显示时间线概述图中选定的数据范围。
默认情况下，所有选定的帧都会显示在概述图和数据网格中。在下面的示例中，这包括许多远低于约 16 毫秒预算的帧，以及不少在图表上几乎不值一提的帧。
持续时间过滤器对于隐藏渲染时间不长的帧很有用。下面是过滤掉渲染时间少于 15 毫秒的帧后的相同数据。
过滤后的帧在概述图中会被淡化，并在时间线记录表中隐藏。应用过滤器可以减少必须调查的配置文件数据量。通过应用任务过滤器，数据可以进一步过滤。
最终想法
了解您的网站如何花费时间对于提供流畅渲染的内容和灵敏的用户体验至关重要。渲染帧时间线是识别性能问题的好工具，这仅仅是个开始。我们为 Web Inspector 的此区域和其他区域计划了许多增强和功能，我们很乐意听取您的反馈。
渲染帧时间线可在 Safari 9 测试版中使用，最新的功能和增强功能可在WebKit Nightly Builds中找到。通过在 Twitter 上向我们发送反馈（@xeenon、@jonathandavis、@matt_a_baker）或提交 Bug 来帮助我们让 Web Inspector 变得更好。