简单地代码如下:
var slice = Array.prototype.slice;
jQuery.fn.begin = function() {
var proxy = {
_core: c,
_queue: []
},
key,
func;
//复制jQuery.fn上的函数
for (key in jQuery.fn) {
func = jQuery.fn[key];
if (typeof func == ‘function’) {
//这里会因为for循环产生key始终是最后一个循环值的问题
//因此必须使用一个闭包保证key的有效性(LIFT效应)
(function(key) {
proxy[key] = function() {
//将函数调用放到队列中
this._queue.push([key, slice.call(arguments, 0)]);
return this;
};
})(key);
}
}
//避免commit函数也被拦截
proxy.commit = jQuery.fn.commit;
return proxy;
};
jQuery.fn.commit = function() {
var core = this._core,
queue = this._queue;
//仅一个each循环
core.each(function() {
var i = 0,
item,
jq = jQuery(this);
//调用所有函数
for (; item = queue[i]; i++) {
jq[item[0]].apply(jq, item[1]);
}
});
return this.c;
};
测试环境
测试使用以下条件:
5000个div放在一个容器(<div id=”container”></div>)中。
使用$(‘#container>div’)选择这5000个div。
每个div要求设置一个随机背景色(randomColor函数),和800px以下的随机宽度(randomWidth函数)。
参加测试的调用方法有3个:
正常使用法:
$(‘#container>div’)
.css(‘background-color’, randomColor)
.css(‘width’, randomWidth);
单次循环法:
$(‘#container>div’).each(function() {
$(this).css(‘background-color’, randomColor).css(‘width’, randomWidth);
});
事务法:
$(‘#container>div’)
.begin()
.css(‘background-color’, randomColor)
.css(‘width’, randomWidth)
.commit();
对象赋值法:
$(‘#container>div’).css({
‘background-color’: randomColor,
‘width’: randomWidth
});
测试浏览器选择Chrome 8系列(用IE测就直接挂了)。
悲伤的结果
原本的预测结果是,单次循环法的效率远高于正常使用法,同时事务法虽然比单次循环法慢一些,但应该比正常使用法更快,而对象赋值法其实是jQuery内部支持的单次循环法,效率应该是最高的。
然而遗憾的是,结果如下:
正常使用法 单次循环法 事务法 对象赋值法
18435ms 18233ms 18918ms 17748ms
从结果上看,事务法成了最慢的一种方法。同时单次循环与正常使用并没有明显的优势,甚至依赖jQuery内部实现的对象赋值法也没有拉开很大的差距。










