javascript - 如何判断 Javascript 在哪里花费的时间最多？

Question

我有一个页面需要大约 15 秒才能加载，因为我正在进行一些循环，克隆 DIV 并将内容加载到其中。Chrome 检查器中是否有某种方法可以让我轻松查看脚本中的阻塞位置？

编辑：我在检查器中尝试了“配置文件”选项卡，但它没有显示我的实际脚本。它显示了没有用的 jquery.js 源代码。

score 4 · Accepted Answer

查看检查器的Profiles 选项卡。注意：这只是 webkit

可以找到有关特定浏览器分析器的更多信息...

score 1 · Accepted Answer

在您要检查的内容的开头放置：

var startTime = new Date().getTime();

最后：

console.log(new Date().getTime()-startTime)

score 0 · Accepted Answer

如果问题与 javascript 的性能有关，那么 Safari WebInspector 或 Chrome DevTools 中的 Profiles 选项卡将为您提供帮助。

它们在 Safari JSC 和 Chrome V8 的分析代码中的区别。JSC 有 Instrumenting profiler，V8 有 Statistical profiler。第一个更精确，第二个对页面性能的影响较小。

Safari 和 Chrome 中的 UI 相同。

分析数据有两种不同的排序顺序。重（自下而上）和树（自上而下）。您可以在配置文件页面底部的组合框中更改它。

如果最耗时的条目是“（程序）”，那么我建议使用时间轴面板。

Chrome 版本的时间轴面板提供了更多信息。

3 回答 3