jQuery技术

记一次失败的jQuery优化尝试

字号+ 作者:H5之家 来源:H5之家 2015-11-22 13:51 我要评论( )

你当前的位置 郑州游侠科技有限公司>新闻中心>网站建设> 网站建设 记一次失败的jQuery优化尝试 页面更新时间:2015-11-02 01:07 来源: otakustay.com发布时间: 2011-02-21 10:17阅读: 1590 次推荐: 0 原文链接 [收藏] 摘要:我们经常抱怨jQuery的DOM操作性能

你当前的位置 郑州游侠科技有限公司>新闻中心>网站建设>

网站建设

记一次失败的jQuery优化尝试

页面更新时间:2015-11-02 01:07

来源: otakustay.com发布时间: 2011-02-21 10:17阅读: 1590 次推荐: 0 原文链接 [收藏] 摘要:我们经常抱怨jQuery的DOM操作性能并不优秀,并且经常尝试用一些方法去进行优化,但是越是优化,越是沮丧地发现jQuery其实已经做得很好,从使用者的角度能够进行的优化实在有限(这并不意味着jQuery的性能是优秀的, 反之只能说它是一个相对封闭的库,无法从外部介入进行优化)。这篇文章就记录一次失败的优化经历。

我经常抱怨jQuery的DOM操作性能并不优秀,并且经常尝试用一些方法去进行优化,但是越是优化,越是沮丧地发现jQuery其实已经做得很好,从使用者的角度能够进行的优化实在有限(这并不意味着jQuery的性能是优秀的, 反之只能说它是一个相对封闭的库,无法从外部介入进行优化)。这篇文章就记录一次失败的优化经历。

优化思想

这一次优化的思想来自于数据库。在数据库优化的时候,我们常会说将大量的操作放在一个事务中一起提交,能有效提高效率。虽然对数据库不了解的我并不知道其原因,但是事务的思想却为我指明了方向(虽然是错的)。

因此我尝试将事务这一概念引入到jQuery中,通过打开和提交事务,从外部对jQuery进行一些优化,其最重要的在于减少each函数的循环次数。

众所周知,jQuery的DOM操作,以get all, set first为标准,其中用于设置DOM属性/样式的操作,几乎都是对选择出来的元素的一次遍历,jQuery.access函数就是其中最核心的部分,其中用于循环的代码如下:

// Setting one attribute

$('#containerdiv')

$('#containerdiv').each(function() {

$('#containerdiv')

$('#containerdiv').css({

悲伤的结果

原本的预测结果是,单次循环法的效率远高于正常使用法,同时事务法虽然比单次循环法慢一些,但应该比正常使用法更快,而对象赋值法其实是jQuery内部支持的单次循环法,效率应该是最高的。

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


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

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

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

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

性能在哪里

首先,从代码的使用上来分析,将正常使用法和测试中最快的对象赋值法进行比较,可以说两者的差距仅在于循环的元素个数的不同(这里抛开了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左右,与前面的数据完全不在一个数量级之上,真正的优化成功。

教训和总结 千万要找到正确的性能瓶颈再进行优化,盲目的猜测只会导致走上错误而偏激的道路。 数据说话,数据面前谁也别说话! 不认为事务这个方向是错误的,如果jQuery原生就能支持事务这样的概念,会不会有其他的点可以优化?比如一个事务自动会将父元素脱离出DOM树之类的

友情提示:郑州做网站公司付出大量的时间搜索关于记一次失败的jQuery优化尝试的相关内容,才整理出记一次失败的jQuery优化尝试这篇文章,如需转载请标明出处,本文链接地址:,谢谢您的支持!

郑州游侠科技致力于郑州网站建设,郑州网站优化,是您在郑州做网站的首选郑州做网站公司

  • 上一篇:CSS技巧: 模块化编码
  • 下一篇:网站优化中的友情俩接注意事项

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 7个有用的jQuery小技巧

      7个有用的jQuery小技巧

      2016-02-26 13:02

    • jQuery制作select双向选择列表

      jQuery制作select双向选择列表

      2016-02-26 11:00

    • 全面详细的jQuery常见开发技巧手册

      全面详细的jQuery常见开发技巧手册

      2016-02-26 10:02

    • 强大的jQuery移动插件Top 10

      强大的jQuery移动插件Top 10

      2016-02-25 09:05

    网友点评
    d