javascript - Chrome 网络检查器：CPU 分析器

Question

我的程序大约需要 20 秒才能加载（很多 svg 对象）。我正在尝试使用 chrome web 检查器进行分析。它显示总共 19.16 秒，但故障并没有完全加起来。我尝试了自下而上，自上而下并以不同的组合排序。仍然无法识别瓶颈。我可以在几毫秒内看到从服务器接收到的数据，但渲染它需要很长时间。

同样在 %ge 视图中，总数为 98%，但其余的单独小于 0.05%，似乎不正确。

在我之前的qn中，我询问了如何显示 #calls 和平均值。我怀疑递归调用可能会导致这种情况，但同时总时间应该反映这一点。

如何识别导致此延迟的功能。任何帮助表示赞赏。

Answer 1

您可以使用此函数记录呼叫之间的时间差异：

var timeVal = new Date().getTime();
var log = function(name){
    var str = new Date().toLocaleTimeString();
    var newTime = new Date().getTime();
    str += " (" + (newTime - timeVal) + "ms)";
    timeVal = newTime;
    console.log(str, name)
}

像这样使用它：

log("prepare for something")
// do something
log("something happened");

输出：

16:57:46 (2496ms) prepare for something
16:57:46 (130ms) something happened