google-chrome - 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 的 split 是一个错误。由于我们在随机状态下停止 JS 线程，因此并不总是可以迭代 JS 调用堆栈，因为例如顶部框架可能是半结构的。我们尽最大努力确定 VM 的当前状态并抓取调用堆栈，但有时我们的启发式方法会失败，在这种情况下，我们最终可能会像您的情况一样捕获不完整的堆栈。