这个差距在Chrome devtools配置文件火焰图中意味着什么

Question

这是我的javascript代码,非常简单:

console.profile();
var count = 1000;
var fn1 = function () {
    for (var i = 0; i < count; i++) {
        console.log("THIS IS FN1");
    }
}

var fn2 = function () {
    for (var i = 0; i < count; i++) {
        console.log("THIS IS FN2");
    }
    fn1();
}

fn2();
console.profileEnd();

这是我的个人资料截图:

为什么图像中有一些间隙,就像我标记的黑色矩形一样？

这个差距意味着什么？

Answer 1

您可以在fn2和fn1之上看到日志调用之间的这种不均匀的间隙序列,因为分析器正在采样并仅为您提供统计信息.它将停止JS线程并且每1ms大约捕获一次当前调用堆栈(在高分辨率模式下为100us),并且每个条的宽度与我们看到相同调用堆栈的连续样本的数量成比例.

fn2的分裂是一个错误.由于我们在随机状态下停止JS线程,因此并不总是可以迭代JS调用堆栈,因为例如顶部框架可能是半构造的.我们尽最大努力确定VM和爬网调用堆栈的当前状态,但有时我们的启发式失败,在这种情况下,我们最终可能会像您的情况一样捕获不完整的堆栈.