工具栏
录制列表面板
录制列表面板列出了您已加载的所有录制,包括您在此会话中进行的录制和已导入的所有录制。
任何时候,都有一个录制被选择,并且该录制会显示在工具界面的其余部分中。 要选择其他录制,就在面板中单击对应录制。 要将录制另存为JSON文件,请单击“保存”。
录制概览
这里是全部录制的概览,x 轴是时间。
录制概览包含两部分: 瀑布流概览和帧率图
瀑布流概览
帧率图
关联事件
放大
您可以使用概览选择录制的一部分以进行更详细的查看。 选择一个区间,主视图将更新为仅包含所选部分。 在下面的屏幕截图中,我们选择了低帧率区间,就可以更详细地查看长时间运行的绘制操作:
详情面板
详情面板显示当前选择的工具选项。 要切换到其他工具,请使用工具栏中的按钮。
瀑布流
瀑布流展示了录制过程中浏览器所做的工作:执行 JavaScript,更新 CSS,更新页面布局以及执行重新绘制。 x 轴表示时间,录制的操作横着看就像瀑布一样,说明了浏览器按照串行进行工作。
要了解有关瀑布的更多信息,请参见单独的瀑布页面。
调用树
调用树是页面中运行的 JavaScript 的采样探查器。 它会定期对 JavaScript 引擎的状态进行采样,并记录在采样时所执行代码的堆栈。 从统计上讲,我们执行特定功能所用的样本数量与浏览器执行该功能所花费的时间相对应,由此您可以确定代码中的瓶颈。
要了解有关调用树的更多信息,请参见单独的调用树页面。
火焰图
分配
分配视图是Firefox 46中的新增功能。
分配视图类似于调用树视图,但用于分配:它显示页面中哪些功能在录制过程中分配的内存最多。
仅当录制文件之前在“性能”工具设置中选中“记录分配”时,才会显示“分配”视图:
要了解有关“分配”视图的更多信息,请参见单独的分配页面。