提高jQuery程式碼效能的幾個方法

jQuery的便利性和當前的受歡迎程度是毋庸置疑的，如果是簡單的程式碼還好，但是如果是龐大的專案的話，就需要特別注意程式碼細節，這樣才不至於效能受到嚴重的影響，下面就簡單介紹一下需要注意的基點。

一.儘可能少使用$:

[JavaScript] 純文字檢視 複製程式碼
$("#bt").click(function(){
  //獲取id屬性值
  $(this).attr("id");
});

以上程式碼的目的是獲取元素的id屬性值，程式碼沒有任何問題，但是還是不夠優化。

程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
$("#bt").click(function(){
  //獲取id屬性值
  this.id;
})

以上程式碼就少使用了$，效能也會得到提高，沒有必要非得追求jQuery的純潔性，非得都要jQuery形式。

二.將jQuery物件快取:

使用jQuery選擇器獲取一個物件是耗費效能的事情，所以我們最好快取起來以便於使用，而不是用到一次獲取一次。

[JavaScript] 純文字檢視 複製程式碼
$("#theid").width();
$("#theid").height();

上面的程式碼每執行一次操作都會重新獲取一次物件，程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
var cached=$("#theid");
cached.width();
cached.height();

以上程式碼就是將jQuery物件快取起來，這樣就不用每一次都去獲取了。

三.減少對DOM結構的修改:

先看程式碼:

[JavaScript] 純文字檢視 複製程式碼
var theArray=["antzone","螞蟻部落","青島市南區","分享互助"];
var oul=$("#theid"); 
for(var index=0;index<theArray;index++){
  oul.append("<li>"+theArray[index]+"</li>"); 
}

以上程式碼需要多次操作dom元素，也就是需要多次追加元素，效能相當不好，修改如下:

[JavaScript] 純文字檢視 複製程式碼
var theArray=["antzone","螞蟻部落","青島市南區","分享互助"];
var oul=$("#theid"); 
var domStr="";
for(var index=0;index<theArray;index++){
  domStr+=oul.append("<li>"+theArray[index]+"</li>"); 
}
oul.html(domStr);

在以上程式碼中，對於dom的操作將會大大減少，效能當然會得到很大的提高。

四.對於選擇器的選擇:

id選擇器的速度最快，此選擇器使用的是document.getElementById()方法，速度最快。

元素選擇器，也就是標籤名稱作為匹配選擇器($("div"))，內部使用的是getElementByTagName()方法，速度也很快。

類選擇器，會遍歷每一個dom節點去查詢具有指定class屬性值的元素，速度不是太好。

偽類選擇器和屬性選擇器，由於當前沒有原生的方法，所以需要自定義的一些方式實現，效能比最差。

五.使用鏈式呼叫:

儘可能的使用鏈式呼叫，不但可以節省程式碼量，也是利用快取的方式，可以有效的提高效能。

[JavaScript] 純文字檢視 複製程式碼
$("div").find("h3").eq(2).html("antzone");