Chrome devtool 火焰图的看法

我们知道某个函数的执行路径是有 call stack 的，可以看到从哪个函数一步步调用过来的，是一条线。

但其实这个函数调用的函数并不只一个，可能是多个：

调用栈只是保存了执行到某个函数的一条路线，而火焰图则保存了所有的执行路线。

所以你会在火焰图中看到这样的分叉：

其实就是这样的执行过程：

来算一道题：

函数 A 总耗时 50 ms，它调用的函数 B 耗时 10 ms，它调用的函数 C 耗时 20 ms，问：函数 A 的其余逻辑耗时多少 ms？

很明显可以算出是 50 - 10 - 20= 20 ms，可能你觉得函数 D 耗时太长了，那就去看下具体代码，然后看看是不是可以优化，之后再看下耗时。

就这么简单，profile 的性能分析就是这么做的，简单的加减法。

火焰图中的每个方块的宽度也反应了耗时，所以更直观一些。

JS 引擎是 event loop 的方式不断执行 JS 代码，因为火焰图是反应所有的代码的执行时间，所以会看到每一个 event loop 的代码执行，具体耗时多少。

每个长条的宽度代表了每个 loop 的耗时，那当然是越细越好，这样就不会阻塞渲染了。所以性能优化目标就是让火焰图变成一个个小细条，不能粗了。