测试环境
测试使用以下条件:
1.5000个div放在一个容器(<div id="container"></div>)中。
2.使用$(‘#container>div’)选择这5000个div。
3.每个div要求设置一个随机背景色(randomColor函数),和800px以下的随机宽度(randomWidth函数)。
参加测试的调用方法有3个:
正常使用法:
$('#container>div')
.css('background-color', randomColor)
.css('width', randomWidth);
.css('background-color', randomColor)
.css('width', randomWidth);
单次循环法:
$('#container>div').each(function() {
$(this).css('background-color', randomColor).css('width', randomWidth);
});
$(this).css('background-color', randomColor).css('width', randomWidth);
});
事务法:
$('#container>div')
.begin()
.css('background-color', randomColor)
.css('width', randomWidth)
.commit();
.begin()
.css('background-color', randomColor)
.css('width', randomWidth)
.commit();
对象赋值法:
$('#container>div').css({
'background-color': randomColor,
'width': randomWidth
});
'background-color': randomColor,
'width': randomWidth
});
测试浏览器选择Chrome 8系列(用IE测就直接挂了)。
悲伤的结果
原本的预测结果是,单次循环法的效率远高于正常使用法,同时事务法虽然比单次循环法慢一些,但应该比正常使用法更快,而对象赋值法其实是jQuery内部支持的单次循环法,效率应该是最高的。
然而遗憾的是,结果如下:
| 正常使用法 | 单次循环法 | 事务法 | 对象赋值法 |
| 18435ms | 18233ms | 18918ms | 17748ms |
从结果上看,事务法成了最慢的一种方法。同时单次循环与正常使用并没有明显的优势,甚至依赖jQuery内部实现的对象赋值法也没有拉开很大的差距。
由于5000个元素的操作已经是非常庞大的循环,如此庞大的循环也没能拉开性能的差距,平时最常用的10个左右的元素操作更不可能有明显的优势,甚至还可能将劣势扩大化。
究其原因,由于本身单次循环法就没有明显的性能提升,因此依赖于单次循环,并是在单次循环之上进行外部构建的事务法,自然是在单次循环的基础上还需要额外增加创建事务对象、保存函数队列、遍历函数队列等开销,结果败给正常使用法也在情理之中。
至此,也算是可以宣布模仿“事务”的优化之道的失败。但是对这个结果却还能进一步地分析。