1 min read

Chrome 开发者工具之 Collect JavaScript CPU Profile

如果你想了解 JavaScript 程序的运行情况,Chrome 开发者工具下的 Collect JavaScript CPU Profile 是个好帮手。

可是它们的文档更新速度常常跟不上它们版本的更新速度。比如 Collect JavaScript CPU Profile 下的 Chart 视图,Chrome 46 以后版本的火焰图(flame chart)已经跟文档上的配图不一样了,是倒过来的。

好在重要的名词没有倒过来。

在 Collect JavaScript CPU Profile 中,我们主要关心函数,比如:

  1. 函数执行了多长时间
  2. 函数调用了哪些函数

Chrome 提供了三种查阅方式:

  1. Heavy (Bottom Up)
  2. Tree (Top Down)
  3. Chart

这三种视图,我比较喜欢 Chart。

chrome devtools cpu profile flame chart

如前面说过的,我们主要关心函数是否执行时间过长

在火焰图上,水平方向表示我们录制的时间轴,垂直方向表示函数的 call stack,即函数调用了其它函数的情形。因为一个色块表示一个函数的执行情况,所以,假如某个色块在水平方向上很宽,则说明它执行的时间太长了,极可能有优化的空间,需要我们注意;至于垂直方向,按 Chrome devtools 文档的说法:so a tall flame is not necessarily significant,其实并不十分重要。

再来说明一下上面的截图中的几个名词:

  1. Name – 表示函数的名称
  2. Self time – 函数自身语句执行的时长,不包含调用其它函数
  3. Total time – 函数整个 call stack 执行的时长
  4. Aggregated self time – 在我们录制的整个时间段内,函数自身语句总共执行了多久
  5. Aggregated total time – 在我们录制的整个时间段内,函数所有 call stack 执行了多久

以截图中具体函数来说:

  1. 函数的 name 是 e.extend._hitTest
  2. 函数语句本身执行的时长是 0,当然,只是无限接近 0
  3. e.extend._hitTest 的 call stack 执行时间 2.5ms
  4. 在我录制的 4s 多时间内,函数自身语句总共执行了 0 秒
  5. 在我录制的 4s 多时间内,函数的 call stack 总共执行了 3.90ms

情况并不算坏。

报告问题 修订