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

【问题标题】：How to tell where a Javascript is taking the most time?如何判断 Javascript 在哪里花费的时间最多？
【发布时间】：2012-04-12 02:05:40
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

查看Profiles tab of the inspector。 注意：这只是 webkit

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

【讨论】：

【解决方案2】：

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

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

最后：

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

【讨论】：

【解决方案3】：

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

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

Safari 和 Chrome 的 UI 相同。

分析数据有两种不同的排序顺序。重（自下而上）和树（自上而下）。您可以在个人资料页面底部的组合框中进行更改。

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

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

【讨论】：