分析 javascript 执行的最佳方法是什么?

有好的 javascript 分析器吗?我知道 Firebug 对分析代码有一定的支持。但我想从更长远的角度来确定统计数据。 假设您正在构建大量的 javascript 代码,并希望确定代码中的瓶颈究竟是什么。首先,我想看到每个 javascript 函数和执行时间的配置文件统计。接下来将包括 DOM 函数。这种方法结合了减慢速度的操作,比如渲染树上的操作,将会非常完美。如果性能在我的代码、 DOM 准备或渲染树/可视化更新中被扼杀,我认为这会给人一个很好的印象。

有没有和我想要的差不多的东西?或者什么是最好的工具来实现我所描述的大部分内容?它会是一个自编译的浏览器加上由配置文件功能增强的 javascript 引擎吗?

71048 次浏览

Firebug

Firebug provides a highly detailed profiling report. It will tell you how long each method invocation takes in a giant (detailed) table.

console.profile([title])
//also see
console.trace()

You need to call console.profileEnd () to end your profile block. See the console API here: http://getfirebug.com/wiki/index.php/Console_API

Blackbird

Blackbird also has a simpler profiler

Firebug+Firefox is a must have. And IE 8's developer toolbar also has a profiler built in (IE 8 ships with the developer toolbar).

Safari 4's web inspector also includes a profiler (although the version in the nightlies is improved wrt. recursive function calls). The Web Inspector also supports Firebug's profiler APIs.

Although Firebug has been mentioned, one additional thing you would want to look at with Firebug is a plugin for Firebug called FireUnit; John Resig talks about it in this blog post:

JavaScript Function Call Profiling

Hope that helps.

For JavaScript, XmlHttpRequest, DOM Access, Rendering Times and Network traffic for IE6, 7 & 8 you can use the FREEdynaTrace AJAX Edition

Chrome's Developer Tools has a built-in profiler.