[原创][开源]跨浏览器的JavaScript性能检测工具 - 至于你信不信,我反正信了

[原创][开源]跨浏览器的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);
       
}
   
};
})(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性能检测的奇迹,至于你信不信,我反正信了。

posted @ 2011-08-02 23:58 三生石上(FineUI控件) 阅读( ...) 评论( ...) 编辑 收藏

你可能感兴趣的:([原创][开源]跨浏览器的JavaScript性能检测工具 - 至于你信不信,我反正信了)