UI Tour

性能工具界面包含下面4个部分：

• 工具栏
• 录制列表面板
• 录制概览
• 详情面板，可能包含下面内容的某一个：
  • 瀑布流
  • 调用树
  • 火焰图

工具栏包含如下按钮:

• 开始和停止录制
• 导入之前保存的录制文件
• 清空录制列表面板. 此操作会删除所有未保存的录制.
• 过滤在瀑布流展示的标记 
• 切换详情面板的活动工具.
• 配置性能选项

录制列表面板列出了您已加载的所有录制，包括您在此会话中进行的录制和已导入的所有录制。

任何时候，都有一个录制被选择，并且该录制会显示在工具界面的其余部分中。 要选择其他录制，就在面板中单击对应录制。 要将录制另存为JSON文件，请单击“保存”。

这里是全部录制的概览，x 轴是时间。

录制概览包含两部分： 瀑布流概览和帧率图

展示了压缩过的瀑布流:

记录操作时使用与主瀑布视图相同的方案进行颜色标记。

帧率可以让您大致了解录制期间浏览器的响应能力：

请参阅有关帧率的单独文章。

由于这些元素是同步的，因此可以将一个元素中的事件与另一个元素中的事件相关联。

例如，在下面的屏幕截图中，长时间运行的绘制操作（在瀑布流中显示为绿色条）对应于帧速率的下降：

您可以使用概览选择录制的一部分以进行更详细的查看。 选择一个区间，主视图将更新为仅包含所选部分。 在下面的屏幕截图中，我们选择了低帧率区间，就可以更详细地查看长时间运行的绘制操作：

详情面板显示当前选择的工具选项。 要切换到其他工具，请使用工具栏中的按钮。

瀑布流展示了录制过程中浏览器所做的工作：执行 JavaScript，更新 CSS，更新页面布局以及执行重新绘制。 x 轴表示时间，录制的操作横着看就像瀑布一样，说明了浏览器按照串行进行工作。

要了解有关瀑布的更多信息，请参见单独的瀑布页面。

调用树是页面中运行的 JavaScript 的采样探查器。 它会定期对 JavaScript 引擎的状态进行采样，并记录在采样时所执行代码的堆栈。 从统计上讲，我们执行特定功能所用的样本数量与浏览器执行该功能所花费的时间相对应，由此您可以确定代码中的瓶颈。

要了解有关调用树的更多信息，请参见单独的调用树页面。 

如果调用树从统计角度告诉您，网站在整个录制过程中执行哪些功能花费了最多时间，则火焰图会告诉您录制过程中任意给定时刻的调用堆栈：

要了解有关火焰图的更多信息，请参见单独的火焰图页面。

分配视图类似于调用树视图，但用于分配：它显示页面中哪些功能在录制过程中分配的内存最多。

仅当录制文件之前在“性能”工具设置中选中“记录分配”时，才会显示“分配”视图：

要了解有关“分配”视图的更多信息，请参见单独的分配页面。