[原创][开源]跨浏览器的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);

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

将需要处理的函数备份起来:var old = jquery.fn[method];

使用一个新的函数覆盖此函数:jquery.fn[method] = function () {

在新函数内,调用备份的原始函数,并在调用前后添加计时代码,以确定本次调用这个原始函数的时间:

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/

它的最大特点:

可以指定测试的命名空间

可以跨浏览器使用

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

在页面的最后引入jprofile.js。(这也是安装jprofile开源解决方案的全部步骤!)

打开页面,可以看到右上角的那个enable jprofile按钮:

点击那个按钮,会弹出一个对话框,输入你要检测的命名空间,比如"jquery":

点击确定,页面会自动刷新,并显示jprofile工具条。点击display按钮显示结果:

跨浏览器测试jqueryui

下面就让我们使用jprofile测试一下jqueryui首页javascript的性能,以下是测试数据。

你可以自己试一下,在线示例地址。

firefox

ie7

ie8

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

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/