jQuery性能優化

1.盡量使用最新版本的jQuery 類庫。

jQuery 每一個新的版本都會較上一版本進行bug修復和一些優化,同時也會包含一些創新,所以建議使用最新版本的jQuery來提高性能。不過更換新版本之后,不要忘記測試代碼的兼容性。

2. 使用合適的選擇器

1.$(“#id”) 使用id來定位DOM元素無疑是最佳提高性能的方式,因為jQuery 底層將直接調用javascript的原生方法document.getElementById()。此外選擇元素時,應該盡量縮小DOM的查找范圍。例如在某個id下查找 div.$("#id").find("div"); 這樣也能提高查找效率。

2.使用標簽選擇器 $("div") $("input")
使用標簽選擇器將會直接調用javascript的document.getElementsByTagName()方法來定位DOM元素。

3.使用類選擇器 $(".class")。
使用類選擇器,如果瀏覽器支持javascript的document.getElementsByClassName()方法,則直接使用該方法,否則就逐個遍歷DOM元素。

4.使用屬性選擇器 $("[attribute=value]")
較新的瀏覽器可能支持document.querySelectorAll()方法,但是有的瀏覽器可能不支持,這在于他們的內核不一樣。使用這種方式來查找DOM元素,性能并不理想,在開發中應該盡量避免使用。

5.使用偽選擇器 $(":hidden")
和上面的屬性選擇器是同一類,javascript并沒有對這類的實現,只有通過逐個遍歷DOM元素來查找滿足要求的元素,這個盡量不要使用。如果必須查找,則盡量縮小范圍,從其父元素來進行搜索。例如: $("#id").find(":hidden");$("div.div").filter(":hidden") 等。

上面的選擇器性能自上而下依次下降,如果對上面有所疑問,可以自己在頁面上進行測試。

3.緩存對象

如果在jQuery開發中經常使用一個對象,建議進行對其緩存,否則你每次使用$()這種方式都會創建一個jQuery對象。
例如有的人喜歡這樣寫:

$("#btn").bind("click",function(){});
$("#btn").css("border","1px");
$("#btn").css("backgroud-color","red");
$("#btn")....

這樣最終會使jQuery創建很多的$(“#btn”)對象,而且在創建之前都必須進行DOM 查找一次。所以建議使用緩存對象或者鏈式的方式。

//緩存對象
$btn=$("#btn");
$btn.bind("click",function(){});
btn.css("border","1px");
btn.css("backgroud-color","red");
btn....
//鏈式操作
$("#btn").bind("click",function(){})
         .css("border","1px")
         .css("backgroud-color","red")
         ....；
 //如果像上面有相同的方法可以進行合并
 $("#btn").bind("click",function(){})
         .css({"border":"1px"},
              {"backgroud-color":"red"})
         ....；

如果某個對象經常使用也可以添加到全局函數中
window.myCustomGlob={
head: ( “ h e a ” ) , t i t l e :

(“title”),
btn:$(“#btn”)
};

記住：永遠不要讓相同的選擇器在代碼里面出現多次。

4.循環時的DOM操作

例如:

$ulList=$("#ulList");//ul列表集合
for(var i=0;i<10;i++)
{
$ulList.append("<li>"+i+"</li>");
}

上面代碼將每一個新的li元素添加到ul中,實際上jQuery操作消耗的性能也不低,因為上面對DOM操作了10次,最好是在插入之前把li創建好。

$ulList=$("#ulList");//ul列表集合
var li="";
for(var i=0;i<10;i++)
{
li+="<li>"+i+"</li>";
}
$ulList.append(li);

5.使用js數組的join()方法來拼接字符串

上面使用+號拼接的li字符串,但是現在可以使用數組來轉換字符串,性能比+號拼接微好些了,尤其是處理長字符串。

$ulList=$("#ulList");//ul列表集合
var liArr=[];
for(var i=0;i<10;i++)
{
liArr[i]="<li>"+i+"</li>";
}
$ulList.append(liArr.join(''));

我自己大概測試了一下,

但是在循環100000的情況下,+號大部分比數組的時間稍微小一些。這兩個性能可以自行選擇。

6.數組方式使用jQuery對象

使用jQuery選擇器獲取的結果是一個jQuery對象。jQuery類庫會讓你感覺正在使用一個定義了索引和長度數組。在性能方面,建議使用for或者while循環處理,而不是使用$.each()。這樣使你的代碼更快。

$.each(array,function(i){

});</code></pre> 
  
可以使用for代替each方法,代碼如下:
 
  
for(var i=0,len=array.length;i<len;i++)
{
}
 
  
另外,檢查長度也是檢查一個jQuery對象是否存在的方式。
 
  
var $btn=$("#btn");
if($btn)//總是true
{};
if($btn.length)//元素存在才返回true
{}
 
  
7.事件代理
 
  
每一個JavaScript事件（click,mousedown）都會冒泡到父級節點。當我們需要給多個元素調用同個函數時這點會很有用。比如,給一個表格綁定點擊td后,背景色設置為紅色。代碼如下:
 
  
$("#table td").click(function(){
    $(this).css("background","red");
});
 
  
如果table中有100個td,在使用上面的方式時,就綁定了100個事件,這將帶來負面的性能影響。代替這種效率很差的多元素事件監聽的方法是,只需要向它們的父節點綁定一次事件,然后通過event.target獲取當前點擊的元素即可。
 
  
$("#table").click(function (event) {
                    var $td = $(event.target);//捕捉觸發的目標元素
                    if ($td[0].nodeName == "TD") {
                        $td.css("background", "red");
                    }
                });
 
  
在改進的代碼中,你只為一個元素綁定了1個事件,這種方式的性能要優于之前那種。
 在jQuery1.7以后的版本中提供了一個新的方式on()，來幫助將整個事件監聽封裝到一個更加便利的方法中,如下:
 
  
$("#table").on("click",'td',function(){
    $(this).css("background","red");
});
 
  
 
 
  
 
 
  
來自：http://blog.csdn.net/u010533180/article/details/53816040