javascript - 如何解读Chrome的JS分析时间轴？

Question

我已经最小化并匿名化了这个问题中的函数名称/调用(并相应地修饰了图像)。回答这个问题时不应该关心实际名称和调用堆栈深度。

我正在尝试通过 Google Chrome 的时间轴找到 Web 应用程序中的瓶颈。但是，我不确定如何解释记录时间线后显示的数据。

例如，我正在使用以下函数:

function obj.a = function (x, y) {
    console.log('a(' + x + ', ' + y + ')');
    return x.getNested().b(y);
};

对其进行分析后，火焰图和事件日志使其看起来像是 console.log和b被 a 多次调用。例如，事件日志如下所示:

a的其他调用似乎(随机？)具有更多嵌套调用 b和log .

官方文档如How to use the timeline tool只提供无用的陈述，例如

When the JS profiler is enabled, your flame chart shows every JavaScript function that was called.

那么，如何读取和解释时间轴面板上显示的 JS 分析信息，以找出哪个函数调用需要多少时间？

Answer 1

这是任何采样分析器的产物。采样分析器按以下方式工作，它定期获取程序堆栈样本，称为采样间隔(在 Chrome 中为 0.1 毫秒或 1 毫秒)。

采样分析器的一个主要缺点是它看不到样本之间程序发生了什么。例如。它无法检测所有函数进入和退出事件。然而，它擅长提供函数执行时间的聚合统计 View 。

在您的示例中，它可能在采样之间退出并进入“a”函数，其中“b”和“log”是顶部帧。