如何解读Chrome的JS分析时间表？

Question

我已将此问题中的函数名称/调用最小化并匿名化（并相应地修改了图像）。实际名称和callstack深度应该无需回答这个问题。

我试图通过Google Chrome的时间轴找到网络应用程序的瓶颈。但是，我不确定如何解释录制时间线后显示的数据。

例如，我使用以下功能：

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等官方文档仅提供无用的声明，例如

  

启用JS探查器后，您的火焰图会显示每个被调用的JavaScript函数。

那么，如何在时间轴面板中显示JS分析信息，以便找出哪个函数调用需要多长时间？

Answer 1

这是任何采样分析器的工件。采样分析器以下列方式工作，它定期采用程序堆栈样本称为采样间隔（在Chrome中为0.1ms或1ms）。

采样分析器的一个主要缺点是它没有看到样本之间程序发生了什么。例如。它无法检测所有函数进入和退出事件。但是，它提供了关于函数执行时间的汇总统计视图。

在你的例子中，它可能已经退出，并且在采用“b”和“log”作为顶部框架的样本之间输入“a”函数。

Answer 2

我创建了一个示例，其中有三个函数可以执行，最后一个函数c在循环中调用第一个函数。

示例：

function a() {
    console.log("a");
}

function b() {
    console.log("b");
}

function c() {
    for (var i = 0; i < 10000; i++) {
        console.log("c");
        a();
    }
}

a();
b();
c();

事件日志如下所示：

您可以在顶部看到三个来电a，b，c。 c可以展开，您会看到一大堆a次来电。我对c调用重复多次的原因的理解是由于CPU中断。 CPU有一段时间来运行JavaScript，然后被中断，然后执行其他工作然后返回，因此时间轴显示当CPU上下文返回到JavaScript时函数的恢复。

“调用树”选项卡应该为您提供每个函数执行时间的更好视图，如下所示：