jQuery性能优化指南（3）

8，尽量使用ID代替Class。

 

前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。
看下面的一个例子：

CSS代码

1. // 创建一个list  
2. var $myList = $('#myList' );  
3. var myListItems = '<ul>' ;  
4. for (i = 0; i < 1000; i++) {  
5.      myListItems += '<li class="listItem'  + i +  '">This is a list item</li>' ; //这里使用的是class  
6.  }  
7. myListItems += '</ul>' ;  
8. $myList.html(myListItems);  
9. // 选择每一个 li  
10.  for (i = 0; i < 1000; i++) {  
11.     var selectedItem = $('.listItem'  + i);  
12. }   

 

在代码最后，选择每个li的过程中，总共用了5066毫秒，超过5秒了。

接着我们做一个对比，用ID代替class：

JavaScript代码

1. // 创建一个list   
2. var  $myList = $( '#myList' );  
3. var  myListItems =  '<ul>' ;  
4. for  (i = 0; i < 1000; i++) {  
5.     myListItems += '<li id="listItem'  + i +  '">This is a list item</li>' ;  //这里使用的是id   
6. }  
7. myListItems += '</ul>' ;  
8. $myList.html(myListItems);  
9.  // 选择每一个 li   
10. for  (i = 0; i < 1000; i++) {  
11.      var  selectedItem = $( '#listItem'  + i);  
12. }   

 

在上段代码中，选择每个li总共只用了61毫秒，相比class的方式，将近快了100倍。

 

 

 

9，给选择器一个上下文

 

jQuery选择器中有一个这样的选择器，它能指定上下文。
jQuery( expression, context );

通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。
普通方式：
$('.myDiv')
改进方式：
$('.myDiv' , $("#listItem") )

 

 

10，慎用 .live()方法（应该说尽量不要使用）

 

这是jQuery1.3.1版本之后增加的方法，这个方法的功能就是为 新增的DOM元素 动态绑定事件。
但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。
例如有这么一段代码:

XML/HTML代码

1. < script   type = "text/javascript"   >   
2. $(function(){  
3.     $("p").click(function(){  
4.          alert( $(this).text() );  
5.      });  
6.     $("button").click(function(){  
7.         $("< p > this is second p </ p > ").appendTo("body");  
8.     });  
9. })   
10. </ script >   
11. < body >   
12.     < p > this is first p </ p >   < button > add </ button >   
13. </ body >   

运行后，你会发现 新增 的 p元素，并没用被绑定click事件。

你可以改成.live("click")方式解决此问题，代码如下：

JavaScript代码

1. $( function (){  
2.     $("p" ).live( "click" , function (){  //改成live方式   
3.          alert( $(this ).text() );  
4.      });  
5.     $("button" ).click( function (){ $( "<p>this is second p</p>" ).appendTo( "body" ); });  
6. })  

但我并不建议大家这么做，我想用另一种方式去解决这个问题，代码如下：

JavaScript代码

1. $( function (){  
2.     $("p" ).click( function (){  
3.         alert( $(this ).text() );  
4.     });  
5.     $("button" ).click( function (){  
6.         $("<p>this is second p</p>" ).click( function (){   //为新增的元素重新绑定一次   
7.                 alert( $(this ).text() );  
8.         }).appendTo("body" );  
9.     });  
10. })  

虽然我把绑定事件重新写了一次，代码多了点，但这种方式的效率明显高于live()方式，
特别是在频繁的DOM操作中，这点非常明显。

 

11，子选择器和后代选择器

 

后代选择器经常用到，比如：$("#list  p");
后代选择器获取的是元素内部所有元素。

而有时候实际只要获取 子元素，那么就不应该使用后代选择器。
应该使用子选择器，代码如下：
$("#list > p");

 

 

12，使用data()方法存储临时变量

 

下面是一段非常简单的代码， 

JavaScript代码

1. $( function (){  
2.     var  flag =  false ;  
3.     $("button" ).click( function (){  
4.         if (flag){  
5.             $("p" ).text( "true" );  
6.             flag=false ;  
7.         }else {  
8.             $("p" ).text( "false" );  
9.             flag=true ;  
10.         }  
11.     });  
12. })  

改用data()方式后，代码如下：

JavaScript代码

1. $( function (){  
2.     $("button" ).click( function (){  
3.         if ( $( "p" ).data( "flag" ) ){  
4.             $("p" ).text( "true" );  
5.             $("p" ).data( "flag" , false );  
6.         }else {  
7.              $("p" ).text( "false" );  
8.              $("p" ).data( "flag" , true );  
9.         }  
10.     });  
11.   
12. })  

jQuery性能优化指南(3)到此结束。

 

相信你也有你的idea，请共享出来吧。 Email : cssrain@gmail.com

 

我的blog： http://www.cssrain.cn