Call Tree - Firefox 开发者工具 编辑

调用树会告诉您浏览器花费最多时间使用哪些JavaScript函数。通过分析其结果，您可以发现代码中的瓶颈 - 浏览器花费了大量时间的地方。

这些瓶颈是您可以做出的任何优化都会产生最大影响的地方。

Call Tree是一个采样分析器。它定期对JavaScript引擎的状态进行采样，并记录当时正在执行的代码的堆栈。统计上，我们执行某个特定功能时采用的样本数量与浏览器执行它的时间相对应。

在本文中，我们将使用简单程序的输出作为示例。如果你想让程序试验你的个人资料，你可以在这里找到它。您可以在这里找到我们讨论的特定配置文件- 只需将其导入性能工具即可。

有描述该计划的结构的短页面在这里。

请注意，我们使用相同的程序 - 实际上是相同的配置文件 - 在Flame Chart的文档页面中。

下面的屏幕截图显示了一个程序的输出，该程序比较了三种排序算法 - 冒泡排序，选择排序和快速排序。为此，它会生成一些填充了随机整数的数组，并依次使用每种算法对它们进行排序。

我们放大了录制的部分，显示了一个很长的JavaScript标记：

Call Tree将结果呈现在表格中。每一行表示一个函数，其中至少取得一个样本，并且按照在该函数中取得的样本数从最高到最低排序行。

样本是我们执行这个特定函数时所采样本的数量。

自我成本是指该数字占记录选定部分样本总数的百分比。

自我时间是根据记录的选定部分覆盖的总时间将该数字转换为毫秒。

在当前版本的调用树中，这些是最重要的列。具有较高自身成本的函数是优化的好选择，或者是因为它们需要很长时间才能运行，或者因为它们经常被调用。

这个屏幕截图告诉我们一些我们可能已经知道的事情：泡泡排序是一种非常低效的算法。泡沫分类中的样本数大约是选择排序中的六倍，是快速排序中的13倍。

走上调用树

每个函数名称旁边都有一个公开箭头：单击它，您可以看到从调用采样的函数到根的备用调用树的路径。例如，我们可以扩展条目bubbleSort()：

所以我们可以看到调用图如下所示：

sortAll（）

    - > sort（）

        - > bubbleSort（）

另请注意，此处的自我成本为sort()1.45％，并且请注意，这sort()与列表中稍后的单独条目相同。这告诉我们一些样本是sort()自己采集的，而不是它所调用的功能。

有时从入口到顶层有多条路径返回。让我们扩展条目swap()：

里面有253个样本swap()。但是swap()通过两种不同的途径达成了：两者bubbleSort()并selectionSort()使用它们。我们还可以看到253个样本中swap()有252个在bubbleSort()分支中，只有一个在selectionSort()分支中。

这个结果意味着冒泡排序比我们想象的效率更低！它可以承担另外252个样本的责任，或几乎占总成本的10％。

通过这种挖掘，我们可以计算出整个调用图和相关的样本数量：

sortAll（）// 8

    - > sort（）// 37

        - > bubbleSort（）// 1345

            - > swap（）// 252

        - > selectionSort（）// 190

            - > swap（）// 1

        - > quickSort（）// 103

            - >分区（）// 12

平台数据

您还会看到一些标记为Gecko，输入和事件等的行。这些代表内部浏览器调用。

这也可以是有用的信息。如果您的网站正在努力使浏览器工作，这可能不会显示为您的代码中记录的示例，但它仍然是您的问题。

在我们的例子中，有679个样本被分配到Gecko--后面的第二大组bubbleSort()。我们来扩展一下：

这个结果告诉我们，这些样本中有614个，或约占总成本的20％，来自我们的sort()呼叫。如果我们查看代码sort()，应该很明显，高平台数据成本来自重复呼叫console.log()：

function sort(unsorted) {
  console.log(bubbleSort(unsorted));
  console.log(selectionSort(unsorted));
  console.log(quickSort(unsorted));
}

考虑更有效的方法来实现这一点肯定是值得的。

这里要注意的一件事是空闲时间被分类为Gecko，所以你的配置文件中没有运行JavaScript的部分将贡献Gecko样本。这些与您的网站的性能无关。

默认情况下，Call Tree不会将平台数据拆分为单独的函数，因为它们会增加很多噪音，并且细节对于不使用Firefox的用户可能不太有用。如果您想查看详细信息，请在设置中选中“显示壁虎平台数据” 。