Chrome Developer Tools Profiler 显示不同数量的方法调用与 console.log

Chrome Developer Tools Profiler showing different number of method calls vs console.log

我在 Chrome 中使用开发工具的配置文件选项卡。在配置文件中,我看到函数 resizeDocument 的条目被调用了 6 次以上,其值分别为 113 毫秒、17 毫秒、45 毫秒等。相同的行号、相同的文件、相同的所有内容。

当我从 resizeDocument 函数中的控制台登录时,我只得到一个条目。怎么回事?

原因在于 chrome 中 CPU 分析器的性质。它是一个采样分析器。因此它收集 运行 程序的调用堆栈(样本)并使用它们重建图表视图中的柱状图。

例如,如果探查器收集了 1000 个样本,每个样本中都有一个函数 'foo' 的调用帧,那么您将看到 1 秒的长条,其中包含 'foo' 名称。

分析器可能无法收集下一个堆栈跟踪。例如,当分析器试图在函数 'foo' 在样本之前调用函数 'bar' 时从堆栈中收集调用帧时,就会发生这种情况。此时,函数 'bar' 在 call 指令之后立即在堆栈上构造 'foo' 的调用帧。所以此时堆栈上的调用帧处于无效状态。探查器检测到并丢弃样本。结果,堆栈跟踪序列中出现了间隙。

在这种情况下,将构建 'foo' 的两个不同柱。

还有一些其他原因导致探查器无法收集调用堆栈。