javascript - Chrome网络检查器: CPU profiler

Question

我的程序需要大约 20 秒来加载(很多 svg 对象)。我正在尝试使用 Chrome Web Inspector 进行配置。它总共显示 19.16 秒，但细目统计并不能完全相加。我尝试了自下而上、自上而下并以不同的组合进行排序。仍然无法识别瓶颈。我可以在几毫秒内看到从服务器接收到的数据，但需要很长时间才能呈现它。

同样在 %ge View 中，总数为 98%，但其余部分单独不足 0.05%，似乎不太正确。

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

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

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