了解 Firebug 分析器输出

IT技术 javascript profiling firebug profiler
2021-03-19 15:45:53

我一直在尝试使用 Firebug 的分析器来更好地了解我们看到的一些 JavaScript 性能问题的根源,但我对输出有点困惑。

当我分析一些代码时,分析器报告Profile (464.323 ms, 26,412 calls)我怀疑 464.323 毫秒是这 26,412 个调用的执行时间的总和。

但是,当我深入查看详细结果时,我看到平均执行时间大于 464.323 毫秒的单个结果,例如平均时间最长的结果报告以下详细信息:

Calls: **1**
Percent: **0%**
Own Time: **0.006 ms**
Time: **783.506 ms**
Avg: **783.506 ms**
Min: **783.506 ms**
Max: **783.506 ms**

另一个结果报告:

Calls: **4**
Percent: **0.01%**
Own Time: **0.032 ms**
Time: **785.279 ms**
Avg: **196.32 ms**
Min: **0.012 ms**
Max: **783.741 ms**

在这两个结果之间,时间结果的总和远大于 464.323。

那么,这些不同的数字是什么意思呢?我应该相信哪些?

4个回答

如果您在 Firebug 中将鼠标悬停在每列上,则每列都有其含义的描述。我假设您可以自己阅读每列的工作方式。但是,您肯定遇到了一些需要解释的奇怪行为。

自己的时间是时间的函数花费执行自身内部的代码量。如果函数没有调用其他函数,那么自己的时间应该和时间一样但是,如果有嵌套的函数调用,那么time也会计算执行它们所花费的时间。因此,time几乎总是大于自己的 time,并且在大多数情况下加起来会超过分析器报告的总时间。

但是,任何单个函数的时间都不应大于分析器为 JavaScript 调用记录的总时间。这个问题绝对是一个错误,我可以理解为什么当 Firebug 为您提供如此矛盾的输出时,您很难信任它。我相信我已经找到了这个错误发生的原因:AJAX。

似乎 AJAX 调用导致计数嵌套函数调用的列报告不正确的信息。他们最终计算 JavaScript 执行的时间对服务器的请求。

您可以通过执行以下操作来重现此分析器错误:

  1. 转到任何使用 AJAX 的站点。(我使用了 http://juicystudio.com/experiments/ajax/index.php
  2. 启用控制台/脚本调试。
  3. 打开分析器。
  4. 进行 AJAX 调用。(多个可能更能说明问题。)
  5. 停止分析器,检查输出。

在此示例中,关于time自己的 time每个函数自己的时间加起来为分析器的总时间,但时间列包含 AJAX 调用与服务器通话所花费的时间。这意味着如果您只是在寻找 JavaScript 执行的速度,那么时间列是不正确的。

情况变得更糟:由于timeaverage timeminmax都对嵌套函数调用进行计数,因此如果您使用 AJAX,它们都是不正确的。最重要的是,任何最终使用 AJAX 的函数(在嵌套函数调用中)也会错误地报告它们的时间。这意味着很多功能可能会报告不正确的信息!因此,在 Firebug 解决问题之前,暂时不要相信这些列中的任何一个。(他们可能希望这种行为是这种方式,尽管这种方式充其量是令人困惑的。)

如果您没有使用 AJAX,那么另一个问题正在发挥作用;如果您是,请告诉我们。

对问题本身发表评论;我仍然看到“时间”大于总配置文件时间的非 AJAX 页面。很混乱。知道除了 AJAX 之外还有什么可能导致这种情况吗?
2021-05-16 15:45:53

如果我理解正确的话,它会是这样的:

在第一行,您会看到自己的时间“仅 0.006 毫秒”。这意味着即使在该函数中花费的时间为 783.506 毫秒,大部分时间也花费在从该函数调用的函数中。

当我使用 Firebug 优化代码时,我尝试减少调用最多的函数的“自己的时间”。(显然还要检查是否有任何不必要的函数调用以完全删除)

来自Firebug 教程 - 日志记录、分析和命令行(第二部分):(那里的示例很好)

Profiler的列和说明

功能栏:显示每个功能的名称。
调用列:它显示调用了特定函数的次数。
百分比列:以百分比显示每个函数的耗时。
时间栏:显示了从函数开始点到函数结束点的执行时间。
Avg 列:显示特定函数的平均执行时间。如果您只调用一次函数,您将看不到差异。如果您多次拨打电话,您将看到差异。
该列的公式是
Avg = Own Ttime / Call;
最小列和最大列:它显示特定功能的最短执行时间。
文件列:函数所在文件的文件名。

据我了解,这就是它的工作原理……总分析器时间是“自己的时间”列的总和。但是,您可能会注意到某些单个时间值可能大于总分析器时间。这些加班时间花在 JavaScript 之外,例如。在插件调用中。如果您的 JS 函数为 eg. 进行插件调用,并等待插件函数返回给 JS,那么总分析器时间不会报告这些等待时间,但会包含在时间列中。