jQuery技术

jQuery应用程序性能指标和调优

字号+ 作者: 来源: 2014-11-16 22:49 我要评论( )

文章介绍了jQuery代码性能的最佳实践,充分利用运行得最快的代码部分,而尽量避免运行得最慢的代码部分。在您阅读完本文之后,“jQuery的性能好吗”这个问题将得到解答。

jQuery无疑是一个出色的JavaScript库,但它的性能如何?在其易用性和优异Web页面性能之间进行折衷是否值得?它的性能是不是真的很优异?本文将回答关于jQuery性能的问题,并提供一些可以改进应用程序性能的技巧。

51CTO推荐专题: jQuery从入门到精通

度量JavaScript性能要考虑的最重要问题是执行JavaScript的环境。因为代码是运行在客户端上的,所以它的执行依赖于客户端计算机,这使得客户端机器成为影响性能的最重要因素。很明显,运行4核CPU的新服务器执行代码的速度肯定要比400MHz老式处理器快。这是毫无疑问的。不过,由于您不能控制Web应用程序用户用于访问您的站点的机器,所以在度量性能时要考虑关于硬件的许多因素。

JavaScript性能的另一个重要方面是用于运行JavaScript的浏览器,JavaScript新手可能不容易发觉这个影响因素。每个浏览器内部都包含一个JavaScript引擎,即用于解析和执行JavaScript代码并处理Web应用程序页面的本机代码。因此,JavaScript的性能严重依赖于客户端使用的浏览器,并且在某些情况下,您可以控制用户使用的浏览器。本文提供一些关于JavaScript性能的指导原则,并解释不同浏览器对性能的影响。

创建性能测试

关于性能测试的第一步是创建一个合适的性能测试。jQuery以及其他JavaScript库在代码中扮演的最重要角色就是使用选择查找特定页面元素。我在最初的性能测试中就以这方面为重点。一个良好的性能测试应该真正地发挥JavaScript库的全部力量,用包含数千个页面元素的页面测试它。应该运行所有选择方法,让我看到哪个选择方法最快,哪个最慢。测试应该事先知道正确的答案,从而确定JavaScript库是否正确地执行选择方法。最后,应该显示所有结果,并附带所用的运行时间,让我能够在所有库之间进行比较。

我差点忽略了性能测试的最重要方面:它应该是免费的。毕竟这个系列文章的不成文规则就是相互利用彼此的成果,因此我继续发扬这种精神,在此使用一个现成的JavaScript库性能测试。这个测试称为SlickSpeedSelectorsTest,它非常适合我的需求。它将jQuery1.2.6(撰写本文时的最新版本)与其他4个流行的JavaScript库(MooTools、Prototype、YUI和Dojo)进行比较。然后,它使用带有数千个页面元素的页面运行40个选择测试。换句话说,这是我所希望的最佳性能测试。我将在第一个性能测试分析中使用该测试。

对比JavaScript库的性能

对于第一个性能测试,我使用的运行环境是2.2GHz处理器、2GBRAM和Firefox3.0.3(非常重要)。我在该配置下运行5次测试,图1显示了5次运行的平均结果。

性能测试1的结果 
图 1.性能测试1的结果

从第一次测试能够得出什么结论?现在我们仅关注总体结果,而不是每次测试。在获得一些总体结论之后,我将稍后在本文中关注每个测试。

结论1:YUI慢到了极点

对,与其他库相比,YUI真的很慢。仔细查看每个测试,找出为什么这个库在选择元素组(例如“p,a”)时非常慢。对于要求具有很好性能的页面而言,这个库是最差的选择。

结论2:Mootools、jQuery和Dojo的运行时间几乎一样

与其他两个库相比,这3个库是非常快的,并且Dojo是它们当中最快的,而jQuery是最慢的。但是从全局考虑,它们之间的速度是很接近的。

结论3:这些库之间的相对差别还是比较明显的

度量最快时间/最慢时间以确定速度的相对差别,您可以看到相对差别为332%。这个差别是比较大的,这表明使用Firefox时选择不同的JavaScript库会对性能有影响。
但是要记住,这些结论仅基于一个浏览器的结果。这是基于Firefox3.0.3得出的结论。现在我们进入下一小节,我将在不同的浏览器上运行该测试。

 

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

网友点评
"