跨浏览器的JavaScript性能检测工具 - 至于你信不信，我反正信了

提出问题

如果识别出页面中JavaScript函数的性能问题，在不同浏览器下有不同的测试工具：

• Firefox下使用Firebug的Profile工具
  
  
• Chrome下使用内置的Profile工具
  
  
• IE9下也有Profile工具
  
  

虽然大家的功能一个比一个炫，但是始终解决不了两个问题：

• 如何只检测指定命名空间下的函数性能，否则会产生大堆的无用数据。
• 不能跨浏览器使用，没有统一的参照物。同时不同工具之间还有一定差异的背景噪音影响。

还有一点就是仍然占据主流的IE7和IE8没有内置的JavaScript性能检测工具。

寻求解决方案

首先在网上找到的一篇文章是John Resig在2008年6月发表的一篇文章，是够古老的了，不过还是非常有借鉴意义，它的输入结果如下所示：

我们来看一下它的核心代码，这段代码用来处理jQuery.fn下的所有函数：
for (var method in jQuery.fn)(function (method) { if (method == "init") return; var old = jQuery.fn[method]; jQuery.fn[method] = function () { if (!internal && curEvent) { internal = true; var m = curEvent.methods[curEvent.methods.length] = { name: method, inLength: this.length, args: formatArgs(arguments) }; var start = (new Date).getTime(); var ret = old.apply(this, arguments); m.duration = (new Date).getTime() - start; if (curEvent.event == "inline") curEvent.duration += m.duration; if (ret && ret.jquery) m.outLength = ret.length; internal = false; return ret; } else { return old.apply(this, arguments); } }; })(method);
从这段代码中，我们看到如下一些步骤：

1. 将需要处理的函数备份起来：var old = jQuery.fn[method];
2. 使用一个新的函数覆盖此函数：jQuery.fn[method] = function () {
3. 在新函数内，调用备份的原始函数，并在调用前后添加计时代码，以确定本次调用这个原始函数的时间：
   var start = (new Date).getTime(); var ret = old.apply(this, arguments); m.duration = (new Date).getTime() - start;
   

有了这个核心概念，我们可以写个自己的JavaScript的Profile功能，而不仅仅是局限于检测jQuery代码，我们要让用户自己指定要检测的JavaScript命名空间！

我的开源实现

我的开源实现：http://code.google.com/p/jprofile/
它的最大特点：

1. 可以指定测试的命名空间
2. 可以跨浏览器使用

使用起来非常方便，只需要如下几个步骤：

1. 在页面的最后引入jprofile.js。（这也是安装jprofile开源解决方案的全部步骤！）
   
   
2. 打开页面，可以看到右上角的那个Enable jProfile按钮：
   
   
3. 点击那个按钮，会弹出一个对话框，输入你要检测的命名空间，比如"jQuery"：
   
   
4. 点击确定，页面会自动刷新，并显示jProfile工具条。点击Display按钮显示结果：
   
   

跨浏览器测试jQueryUI

下面就让我们使用jProfile测试一下jQueryUI首页JavaScript的性能，以下是测试数据。 你可以自己试一下，在线示例地址。

• Firefox
  
  
• IE7
  
  
• IE8
  
  

这是个跨浏览器JavaScript性能检测的奇迹，至于你信不信，我反正信了。

延伸阅读