优化jQuery性能技巧-优快云博客

1、总是使用id选择器。

在jQuery中最快的选择器是id选择器，它直接映射到JavaScript的getElementById()方法。

在jQuery中最慢的选择器是class选择器，在IE中它循环整个DOM，可能的话尽量避免使用class选择器。

(1)当需要选择某元素，使用其id选择器。如：

[html]view plaincopy 
   
 $('#student')  

替代

[html]view plaincopy 
   
 $('.students')  

(2)当需要选择多个元素（如某标签元素、某类元素等）时，总是使用最近的父id，构成子选择器，加快查找。如：

[html]view plaincopy 
   
 $('#student input')  

2、总是在一个Class前面加上一个tag名字，当然最好在前面加上最近的父id，构成子选择器。

在jQuery中第2快的选择器是标签选择器，它直接映射到JavaScript的getElementsByTagName()方法。如：

[html]view plaincopy 
   
 $('#student input.boy')  

不要在id选择器前面加标签选择器。如：

[html]view plaincopy 
   
 $('div#student')  

从多个ID传下来是冗余的。如：

[html]view plaincopy 
   
 $('#student#boy')  

3、养成保存jQuery对象到一个变量上的习惯。如：

[html]view plaincopy 
   
 var stu = $('#student');  

4、用jQuery的链式调用。如：

[html]view plaincopy 
   
 var stu = $('#student');   
 stu.css('background','red').fadeIn('slow');  

5、保存jQuery父对象后使用子查询。如：

[html]view plaincopy 
   
 var stu = $('#student');   
 var boy = stu.find('input.boy');  

6、在开始佛日循环的时候设置一个变量来存储这个数字，可以让循环跑得更快。如：

[html]view plaincopy 
   
 for (var i = 0, len = list.length; i < len; i++)  
     li += '<li>' + list[i] + '</li>';  

代替

[html]view plaincopy 
   
 for (var i = 0; i < list.length; i++)  
     li += '<li>' + list[i] + '</li>';  

7、限制直接对DOM操作，若要插入一系列DOM元素，先构造好再一次性插入而不是每构造一个元素就插入一次。如：

[html]view plaincopy 
   
 var list = ['第一章','第二章','第三章','第四章'];  
 var $list = $('#list);  
 var li = "";  
 for (var i = 0, len = list.length; i < len; i++)  
         li += '<li>' + list[i] + '</li>';  
 $list.html(li);  

替代

[html]view plaincopy 
   
 var list = ['第一章','第二章','第三章','第四章'];  
 var $list = $('#list);  
 var li = "";  
 for (var i = 0, len = list.length; i < len; i++)  
     $list.append('<li>' + list[i] + '</li>');  

8、使用$(window).load。

$(document).ready()表示文档准备好了，也就是浏览器已经解析完整个html文档，dom树已经建立起来了；而$(window).load()表示整个页面已经加载完毕，与前者的区别是dom树虽然已经建立起来了，但页面不一定加载完毕，如一些大的图片等加载完成需要一定的时间；但是页面加载完毕后，dom肯定也就建立起来了。

如果发现页面在下载中停顿，就有可能是$(document).ready引起的。把jQuery函数绑定到$(window).load事件，可以减少下载时的CPU使用率，它是在所有HTML（包括iframe内容）都下载完后才去调用所有对象的。