Chrome devtools配置文件火焰图中的这个差距是什么意思 [英] What are this gap mean in Chrome devtools profile flame chart

问题描述

  console.profile（）;这是我的javascript代码，它非常简单： 
 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。日志（这是FN2）; 
} 
 fn1（）; 
} 
 
 fn2（）; 
 console.profileEnd（）; 
  

这是我的个人资料截图：

为什么会有一些图像中的空白，就像我的黑色矩形标记的那样？

这个差距是什么意思？

解决方案

您会在fn2和fn1之间的日志调用之间看到这种非均匀的间隔序列，因为profiler是 sampling 并且仅为您提供统计信息。它会停止JS线程并每1ms大约捕获一次当前调用堆栈（高分辨率模式下为100us），并且每个条的宽度与我们已经看到相同调用堆栈的连续样本数成比例。

fn2的分裂是一个错误。由于我们停止JS线程处于随机状态，因此并不总是可以迭代JS调用堆栈，顶部框架可能是一半构造的。我们尽最大努力来确定虚拟机的当前状态并抓取调用堆栈，但有时候我们的启发式方法会失败，在这种情况下，我们最终可能会捕获不完整的堆栈，就像您的情况一样。

Here is my javascript code, it is pretty simple:

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();

and this is my profile screenshot:

Why there are some gap in the image, just like my black rectangle marked?

What does this gap mean?

解决方案

You see this non-uniform sequence of gaps between log calls on top of fn2 and fn1 because the profiler is sampling and gives you only statistical information. It will stop JS thread and capture current call stack roughly once per 1ms (100us in high res mode) and width of each bar is proportional to the number of consecutive samples where we've seen the same call stack.

The split of fn2 is a bug. Since we stop JS thread in random state it is not always possible to iterate JS call stack because e.g. top frame may be half-constructed. We do our best to determine current state of the VM and crawl call stack but sometimes our heuristics fail in which case we may end up capturing incomplete stack like in your case.

这篇关于Chrome devtools配置文件火焰图中的这个差距是什么意思的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！