javascript - 使用 API 分析 Javascript 性能

Question

嘿，我一直在探索 google-chrome 调试工具和分析工具。真是太神奇了。我遇到的一个有用的东西是我以完整的树结构获取执行的调用树及其所花费的时间(自身时间和总子时间计数)。

所以我想知道我们是否可以使用一些 JS API 在树结构中获取调用树及其计时。我可以使用这个树计时来对我的代码的不同版本进行基准测试，如果我可以自动化，则可以完成各种其他很酷的事情。

我在网上找不到太多有用的东西。你能给我一些指导吗？提前致谢。

如果问题中的某些部分不清楚，请在评论中告诉我。我会重新措辞。

Answer 1

如果您想对应用的不同版本进行基准测试，您可以在 Chrome DevTools 的配置文件中轻松实现这一目标。您可以将它们记录并保存到您的计算机上，然后在将来随时再次加载它们。这不仅仅适用于当前 session 。

例如，您记录版本 1 的个人资料。几天后，您在 Chrome 中加载应用程序，记录新的个人资料，然后导入旧的个人资料并比较图表或 TreeView 。

您甚至可以打开计算机上保存的文件，这些文件以 JSON 格式存储。您拥有需要使用的所有数据。您可以运行服务器来解析该数据并将相关信息提取为您喜欢的格式。但数据量可能很大且处理速度很慢。

有关评论的更新:

console.timeline 和 console.timelineEnd 均已弃用，并替换为 console.time 和 console.timeEnd >。但是，没有要存储的返回值，因此您无法对 JavaScript 中的结果执行任何操作。但是，您可以使用 window.performance :

var start = window.performance.now();
// your function
var end = window.performance.now();
var timeSpent = (end - start);
var stack = new Error().stack; // get call stack

然后您可以对结果执行您喜欢的操作。 如果您想对来自第 3 方的函数进行计时，您可以覆盖它并在其间应用原始函数:

var oldFunc = myFunc;

myFunc = function() {
    var start = window.performance.now();
    var returnVal = oldFunc.apply(this, arguments);
    var end = window.performance.now();
    var timeSpent = (end - start);
    var stack = new Error().stack; // get call stack
    return returnVal;
}