跨浏览器的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 =(newDate).getTime();
            var ret = old.apply(this, arguments);
            m.duration =(newDate).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);
        }
    };
});

从这段代码中，我们看到如下一些步骤：

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命名空间！

我的开源实现

它的最大特点：

1. 可以指定测试的命名空间

2. 可以跨浏览器使用

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

1. 在页面的最后引入jprofile.js。（这也是安装jprofile开源解决方案的全部步骤！）

   
   

2. 打开页面，可以看到右上角的那个Enable jProfile按钮：

   
   

3. 点击那个按钮，会弹出一个对话框，输入你要检测的命名空间，比如"jQuery"：

   
   

4. 点击确定，页面会自动刷新，并显示jProfile工具条。