jQuery性能优化的38个建议

  次阅读 作者:智能小宝 来源:互联网 2016-01-27 15:52 我要评论(0)

想必大家对于jQuery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在这篇文章中,参 考了一些资料及实际使用效率,将介绍一些书写高质量jQuery代码的原则,不单单会告诉你如何去书写,也会告诉你为什么这样书写,希望大家会觉得有所帮 助

一、注意定义jQuery变量的时候添加var关键字

这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:

$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的

二、请使用一个var来定义变量

如果你使用多个变量的话,请如下方式定义:

代码如下:var page = 0,

$loading = $('#loading'),

$body = $('body');

不要给每一个变量都添加一个var关键字,除非你有严重的强迫症

三、定义jQuery变量是添加$符号

申明或者定义变量的时候,请记住如果你定义的是jQuery的变量,请添加一个$符号到变量前,如下:

代码如下:var $loading = $('#loading');

这里定义成这样的好处在于,你可以有效的提示自己或者其它阅读你代码的用户,这是一个jQuery的变量。

四、DOM操作请务必记住缓存(cache)

在jQuery代码开发中,我们常常需要操作DOM,DOM操作是非常消耗资源的一个过程,而往往很多人都喜欢这样使用jQuery:

代码如下:

$('#loading').html('完毕');

$('#loading').fadeOut();

代码没有任何问题,你也可以正常运行出结果,但是这里注意你每次定义并且调用$('#loading')的时候,都实际创建了一个新的变量,如 果你需要重用的话,记住一定要定义到一个变量里,这样可以有效的缓存变量内容,如下:

代码如下:var $loading = $('#loading');

$loading.html('完毕');$loading.fadeOut();

这样性能会更好。

五、使用链式操作

上面那个例子,我们可以写的更简洁一些:

代码如下:

var $loading = $('#loading');

$loading.html('完毕').fadeOut();

六、精简jQuery代码

尽量把一些代码都整合到一起,请勿这样编码:

代码如下:

// !!反面人物

$button.click(function(){

$target.css('width','50%');

$target.css('border','1px solid #202020');

$target.css('color','#fff');

});

应该这样书写:

代码如下:$button.click(function(){

$target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});

});

七、避免使用全局类型的选择器

请勿如下方式书写:$('.something > *');

这样书写更好:$('.something').children();

八、不要叠加多个ID

请勿如下书写:$('#something #children');

这样就够了:$('#children');

九、多用逻辑判断||或者&&来提速

请勿如下书写:

代码如下:

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...