JQuery效能最佳化方法

標籤：style   blog   io   color   ar   使用   java   sp   for   

儘管JavaScript比JAVA C++慢很多，JQuery比原生Js還慢很多，但是我們通過良好的編程習慣還是能提高代碼執行的效率。

一.選取器的使用

選擇同一個元素，各種方法之間的效能是不一樣的，有時候差異會特別大。通常比較常用的選取器有以下幾個： 

ID選取器 $("#id") 

標籤選取器 $("td") 

類別選取器 $(".target") 

屬性選取器 $("td[target=‘target‘]") 

偽類別選取器 $("td:hidden") 

這5種選取器的效能是依次下降的：

效能順序：ID選取器 > 標籤選取器 > 類別選取器 > 屬性選取器 > 偽類別選取器 

 

二.避免執行全域尋找

//錯誤的$("div.bizHelp"); //正確的$("bizHelp"); $("#container").find(".bizHelp"); 

保證查詢的路徑最短，效能最優　　

 

三.緩衝對象

//錯誤的$(window).bind(‘click‘,function(){  //do someing...    });$(window).css(‘width‘,‘1000px‘);$(window).bind(‘load‘,function(){  //do someing...    });

 

//最佳化的var $win = $(window);$win.bind(‘click‘,function(){  //do someing...    });$win.css(‘width‘,‘1000px‘);$win.bind(‘load‘,function(){  //do someing...    });

　

四.採用樣式表 避免多次DOM style樣式

var obj=$("#obj"); //A:obj.css("width",200);  obj.css("height",200);  obj.css("background":"#eee"); //B:obj.attr("style","width:200px;height:200px;background:#eee;");  //C://加個css .operation{width:200px;height:200px;background:#eee;}  obj.addClass("operation") 

效能排序：C>B>A

 

五.減少對DOM元素的操作次數

//不好的$.each(arr,function(i){   $(window).append(‘<li>‘+arr[i]+‘</li>‘)});//最佳化的var _html=[];$.each(arr,function(i){   _html.push(‘<li>‘+arr[i]+‘</li>‘)});$(window).append(_html.join(‘‘));

 

六.最佳化事件冒泡

//不好的$(‘a‘).click(function(){    //do someing...});  //推薦的$(document.body).click(function(event){    if(event.target.tagName==‘A‘){        //do someing...    }});//JQuery的方法$(document.body).delegate("a","click",function(){ //do someing...});

　　

　

 

七.更高效的遍曆方式

var list=ul.find("li"),      e; //A:var i=list.length;  while(i--){      e=$(list[i])  } //B:list.each(function(){    e=$(this);  });  //C:$.each(list,function(){    e=$(this);  });  

JQuery提供了$.fn.each()和$.each()兩個方法來實現對集合的遍曆，除此之外，還可以採用JS原生的for迴圈、while等來實現迭代，應該瞭解一下他們之間的效能差異：

測試說明：1w次執行耗時，單位毫秒/ms,統計三次啟動並執行平均值

方案	IE6	IE7	IE8	IE9	chrome	firefox	opera	safari
A	172	219	157	30	3	5	4	6
B	219	234	203	41	4	6	5	8
C	219	234	187	52	3	4	5	7

 

結論

1. 總體上來說A>C>B

2. 方案A有大約25%的效能提升，但是不穩定。追求極致效能，用方案A；

3. 迴圈數量少的話，建議使用方式情節C，比較穩定；

 

八.優先使用原生屬性

$.each(list,function(){    //A    var id=$(this).attr("id");    //B    var id=this.id;  })  

很多常用的屬性，比如id、name等都被瀏覽器原生實現，在JQuery中我們有時會用$(this).attr("id")的方式來擷取id，這種方法的效率相比原生屬性的擷取效率而言，非常慢。

使用原生的API，可以極大的提高效能

測試說明：10w次執行耗時，單位毫秒/ms,統計三次啟動並執行平均值

 

方案	IE6	IE7	IE8	IE9	chrome	firefox	opera	safari
A	6880	7030	4220	1188	157	244	133	135
B	310	310	150	27	4	5	17	3

 

九.可能的話，使用最新版本的JQuery

新版本總會對效能進行改進，還會提供一些新的方法。

如果可以的話，應該盡量選用最新的版本；

 

JQuery效能最佳化方法