jQuery最佳实践完整篇

2020-05-23 06:08:32易采站长站整理

上周,我整理了《jQuery设计思想》。

那篇文章是一篇入门教程,从设计思想的角度,讲解“怎么使用jQuery”。今天的文章则是更进一步,讲解“如何用好jQuery”


我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks)。他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值。


==============================================


jQuery最佳实践


阮一峰 整理



1. 使用最新版本的jQuery


jQuery的版本更新很快,你应该总是使用最新的版本。因为新版本会改进性能,还有很多新功能。


下面就来看看,不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句:



  $(‘.elem’)


  $(‘.elem’, context)


  context.find(‘.elem’)


我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试,看看浏览器在1秒内能够执行多少次。结果如下:



可以看到,1.6.2版本的运行次数,远远超过两个老版本。尤其是第一条语句,性能有数倍的提高。


其他语句的测试,比如.attr(“value”)和.val(),也是新版本的jQuery表现好于老版本。


2. 用对选择器


在jQuery中,你可以用多种选择器,选择同一个网页元素。每种选择器的性能是不一样的,你应该了解它们的性能差异。


(1)最快的选择器:id选择器和元素标签选择器


举例来说,下面的语句性能最佳:



  $(‘#id’)


  $(‘form’)


  $(‘input’)


遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法(比如getElementById()),所以它们的执行速度快。


(2)较慢的选择器:class选择器


$(‘.className’)的性能,取决于不同的浏览器。


Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。但是,IE5-IE8都没有部署这个方法,所以这个选择器在IE中会相当慢。


(3)最慢的选择器:伪类选择器和属性选择器


先来看例子。找出网页中所有的隐藏元素,就要用到伪类选择器: