How to read chrome dev console profile chart

Question

All:

Im pretty new to Chrome JS console. Right now I just start to use profiling tool to record:

Say I have a very simple function call stack:

<script type="text/javascript">
    function hello(){
        var n = Math.random()*100;
        if(n>50){
            return "Hello!"
        }else {
            return "Nihao!"
        }
    }
    function hellosb(name){
        console.log( hello()+" "+name );
    }
    function show(){
        var sum = 0;
        for(var i=0; i<10; i++){
            for(var j=0; j<10; j++){
                hellosb(i*j+"");
            }
        }
    }
    show();
</script>

And I got result like this(part related to call stack):

I am not sure how to read it, for example:

1. There should be multiple call to hellosb() and hello(), it only show one in the chart, where can I find them all?
2. How can I track back to its caller if there is some async event call?

Answer 1

您已设置滚动条以显示1628毫秒到1656毫秒之间的活动，间隔为28毫秒。 你正在看的是当时发生的事情的倒置火焰图。 正如您所看到的，主要用于show()调用hellosb()来调用console.log。看起来像一个电话也可能是多次通话。

似乎Chrome Dev Tools Profiler是一个堆栈采样分析器，因此不太可能看到非常短暂的情况，例如hellosb返回和下次调用之间的时间。 另外，请注意它不报告调用hellosb或其他例程的次数，这是有道理的，因为采样器不计算调用。

这没关系，因为分析的通常目的是找到负责很长一段时间（不是很小一部分）的代码，所以你可以在那里查看是否可以删除它正在做的任何事情。 这不需要知道代码执行了多少次。 如果执行次数过多，可以在其来电者身上看到。