我有一个页面需要大约 15 秒才能加载,因为我正在进行一些循环,克隆 DIV 并将内容加载到其中。Chrome 检查器中是否有某种方法可以让我轻松查看脚本中的阻塞位置?
编辑:我在检查器中尝试了“配置文件”选项卡,但它没有显示我的实际脚本。它显示了没有用的 jquery.js 源代码。
我有一个页面需要大约 15 秒才能加载,因为我正在进行一些循环,克隆 DIV 并将内容加载到其中。Chrome 检查器中是否有某种方法可以让我轻松查看脚本中的阻塞位置?
编辑:我在检查器中尝试了“配置文件”选项卡,但它没有显示我的实际脚本。它显示了没有用的 jquery.js 源代码。
查看检查器的Profiles 选项卡。注意:这只是 webkit
可以找到有关特定浏览器分析器的更多信息...
铬:https ://developers.google.com/chrome-developer-tools/docs/profiles
火狐: http: //getfirebug.com/javascript
歌剧:http ://dev.opera.com/articles/view/opera-developer-tools/
甚至 IE 也有开发工具:http: //blogs.msdn.com/b/ie/archive/2008/09/11/introducing-the-ie8-developer-tools-jscript-profiler.aspx
在您要检查的内容的开头放置:
var startTime = new Date().getTime();
最后:
console.log(new Date().getTime()-startTime)
如果问题与 javascript 的性能有关,那么 Safari WebInspector 或 Chrome DevTools 中的 Profiles 选项卡将为您提供帮助。
它们在 Safari JSC 和 Chrome V8 的分析代码中的区别。JSC 有 Instrumenting profiler,V8 有 Statistical profiler。第一个更精确,第二个对页面性能的影响较小。
Safari 和 Chrome 中的 UI 相同。
分析数据有两种不同的排序顺序。重(自下而上)和树(自上而下)。您可以在配置文件页面底部的组合框中更改它。
如果最耗时的条目是“(程序)”,那么我建议使用时间轴面板。
Chrome 版本的时间轴面板提供了更多信息。