Javascript 在 Chrome 分析器中计算函数调用

Question

是否可以从 Chrome 配置文件（开发人员工具）中获取函数被调用了多少次的信息？
我在代码中找到了如何做到这一点：

console.count("Function called");

和一些非常古老的（2011 年及前后）主题和功能请求，例如 this one。但如果可以记录每次函数调用的计数，则没有新信息。

有时你会发现有些调用在一秒钟内被调用多次，如果只调用一次会大大提高性能（增加一些执行延迟）。为了跟踪此功能计数器是必要的。

Answer 1

您将不会在时间轴/CPU分析器中看到函数调用计数，因为Chrome开发工具中的标准分析器是采样分析器。

采样分析器以预定义的时间间隔获取执行堆栈快照。当它即将执行时，JS 执行暂停，并记录当前执行堆栈上的函数。这就是您在时间线的火焰图中看到的。

鉴于所描述的行为，应该清楚采样分析器可以不能记录所有函数调用（一个函数可以被调用并在两次测量暂停之间完成其执行）。

还有其他分析器可以记录所有函数调用，最容易使用的可能是Web Tracing Framework。它通过检测您的代码来工作（通过用测量代码包装每个函数调用来重写它）。 WTF 需要更多时间来设置（检测步骤）并且会对测量的时间产生影响（因为它注入新代码）但至少可以显示所有函数调用。

归根结底，没有一款分析器可以完美适用于所有跟踪作业。您需要根据要测量的内容使用不同的。有一篇关于不同分析器细节的精彩演讲，强烈推荐：https://www.youtube.com/watch?v=nxXkquTPng8

Answer 2

我创建了一个代码来调用具有自定义名称的方法，这样您就可以在火焰图中查找它并计算它被调用了多少次

export const traceToFlameChart = (param: string): void => {
  const name = 'trace' + param;
  const code = `function ${name}() {console.log('running ${param}')}; ${name}()`;
  eval(code);
};

Javascript 在 Chrome 分析器中计算函数调用

Javascript count function calls in Chrome profiler

javascript

profiling

google-chrome

google-chrome-devtools