技术开发 频道

jQuery:一次失败的优化尝试

  性能在哪里

  首先,从代码的使用上来分析,将正常使用法和测试中最快的对象赋值法进行比较,可以说两者的差距仅在于循环的元素个数的不同(这里抛开了jQuery的内部问题,事实上jQuery.access的糟糕实现也确实有拖对象赋值法后腿之嫌,好在并不严重),正常使用法是10000个元素,对象赋值法是5000个元素。因此可以简单地认为,18435 – 17748 = 687ms是循环5000个元素的耗时,这占到整个执行过程的3.5%左右,并不是整个执行过程的主干,其实真的没有优化的必要。

  那么另外96.5%的开销去了哪里呢?谨记Doglas的一句话,“事实上Javascript并不慢,慢的是DOM的操作”。其实剩下96.5%的开销中,除去函数调用等基本的消耗,至少有95%的时间是用在了DOM元素的样式被改变后的重新渲染之上。

  发现了这个事实之后,其实也就有了更正确的优化方向,也是前端性能中的基本原则之一:在修改大量子元素时,先将根父DOM节点移出DOM树。因此如果使用以下的代码再进行测试:

//没有重用$('#container')已经很糟糕了
$('#container').detach().find('div')
    .css(
'background-color', randomColor)
    .css(
'width', randomWidth);
$(
'#container').appendTo(document.body);

  测试结果始终停留在900ms左右,与前面的数据完全不在一个数量级之上,真正的优化成功。

  教训和总结

  1.千万要找到正确的性能瓶颈再进行优化,盲目的猜测只会导致走上错误而偏激的道路。

  2.数据说话,数据面前谁也别说话!

  3.不认为“事务”这个方向是错误的,如果jQuery原生就能支持“事务”这样的概念,会不会有其他的点可以优化?比如一个事务自动会将父元素脱离出DOM树之类的……

0
相关文章