技术开发 频道

jQuery:一次失败的优化尝试

  测试环境

  测试使用以下条件:

  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);

  单次循环法:

$('#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内部支持的单次循环法,效率应该是最高的。

  然而遗憾的是,结果如下:

正常使用法单次循环法事务法对象赋值法
18435ms18233ms18918ms17748ms

  从结果上看,事务法成了最慢的一种方法。同时单次循环与正常使用并没有明显的优势,甚至依赖jQuery内部实现的对象赋值法也没有拉开很大的差距。

  由于5000个元素的操作已经是非常庞大的循环,如此庞大的循环也没能拉开性能的差距,平时最常用的10个左右的元素操作更不可能有明显的优势,甚至还可能将劣势扩大化。

  究其原因,由于本身单次循环法就没有明显的性能提升,因此依赖于单次循环,并是在单次循环之上进行外部构建的事务法,自然是在单次循环的基础上还需要额外增加创建事务对象、保存函数队列、遍历函数队列等开销,结果败给正常使用法也在情理之中。

  至此,也算是可以宣布模仿“事务”的优化之道的失败。但是对这个结果却还能进一步地分析。

0
相关文章