jQuery性能最佳实践

一、使用最新的jquery版本

 

二、用对选择器

  

  1、最快选择器：id选择器和标签选择器     

$('#id'),$('form'),$('p')

  2、较慢选择器：class选择器

$('.className')

  3、最慢选择器：伪类选择器和属性选择器

$(':hidden'),$('[attribute=value]')

三、理解子元素和父元素的关系

$('.child', $parent)
 
$parent.find('.child')
 
$parent.children('.child')
 
$('#parent > .child')
 
$('#parent .child')
 
$('.child', $('#parent'))  
 
 /*以上写法最快的是$parent.find('.child'),最慢的是$('#parent .child')*/

 四、不要过度使用jQuery

 

   jQuery速度再快，也无法于原生的javascript方法快。如果情况允许尽量使用javascript原生方法。

$('a').click(function(){alert($(this).attr('id'));});

   优化:

$('a').click(function(){alert(this.id);});

五、做好缓存

 

   选中某个网页元素开销大，所以使用选择器的次数越少越好，并且尽量缓存选中结果，便于以后反复使用。

jQuery('#top').find('p.classA');jQuery('#top').find('p.classB');

   优化:

var cache = jQuery('#top');cache..find('p.classA');cache.find('p.classB');

六、使用链式写法

 

   采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。

 

七、事件的委托处理

 

   javascript事件模型采用“冒泡”模式：子元素的事件会逐级向上“冒泡”，成为父元素的事件。利用这一点，可以大大简化事件的绑定。

 $('table > td').bind('click', function(){$(this).toggleClass('click');});

   优化:

$('table').delegate('td', 'click', function($(this).toggleClass('click');));

八、少改动DOM结构

 

   1、改动DOM结构开销很大，不要频繁使用append()、insertBefore()、insertAfter()。如果要插入多个元素，就先把它们合并，然后一次性插入。

 

   2、如果要对一个DOM元素进行大量处理，应该先用detach()方法，把这个元素从DOM中取出，处理完毕以后，重新插回文档。

 

   3、如果要在DOM元素上存储数据，不要写成下面这样：

var elem = $('#elem'); elem.data(key, value);

   应该写成这样:

var elem = $('#elem'); $.data(elem, key, value);

九、正确处理循环

 

   循环是一种比较耗时的操作，如果可以使用复杂的选择器直接选中元素，就不要使用循环，去一个个辨认元素。javascript原生循环方法for和while，要比jQuery的each()方法快，应该优先使用原生方法。

 

十、尽量少生成jQuery对象

 

   每使用一次选择器，就会生成一个jQuery对象。jQuery对象是一个庞大的对象，带很多属性和方法，占用不少资源。比如许多jQuery方法都有两个版本，一个是供jQuery对象使用的版本，另一个是供jQuery函数使用的版本。

   jQuery对象使用:

var $text = $("#text");var $ts = $text.text();

   jQuery函数使用:

var $text = $("#text");var $ts = $.text($text);

   后者要比前者快

 

  ----EOF----

 

(原文出处:阮一峰《JQuery最佳实践》http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html)