jQuery效能最佳化

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

1、使用最新版本的jQuery類庫

jQuery每一個版本的更新都會進行一些Bug修複和一些最佳化，同時也會包含一些創新。但是，需要注意版本的相容性，不要忘記測試你的代碼。

2、使用合適的選取器

不同的選取器其效能也有差異，總的來說$("id")>$("p")>$(".class")>$("[attribute=value]")>$(":hidden")。

對於$(".class")，比較新的瀏覽器如IE9，它支援本地方法document.getElementByClassName(),而對於老的瀏覽器，如IE8及之前版本，只能靠使用DOM搜尋方式來實現，這無疑對效能產生較大的影響，所以應該有選擇性的使用。

注意：1、盡量使用ID選取器；2、盡量給選取器指定上下文。

3、緩衝對象

有以下代碼：

#("traffic_light input.on").bind("click",function(){...});#("#traffic_light input.on").css("border",1px dashed yellow");#("#traffic_light input.on").css("background-color",orange");#("traffic_light input.on").fadIn("slow");

jQuery會在建立每一個選取器的過程中，尋找DOM，建立多個jQuery對象，下面是一個較優的寫法：

var $active_light=#("traffic_light input.on");//緩衝變數$active_light.bind("click",function(){...});$active_light.css("border",1px dashed yellow");$active_light.css("background-color",orange");$active_light.fadIn("slow");

當然如果使用鏈式方式將更加簡潔。

永遠不要讓相同的選取器在你的代碼裡出現多次。

4、迴圈時的DOM操作

下面是一個迴圈添加DOM節點的例子，代碼如下：

var top_100 list=[...],//假設這裡是100個獨一無二的字串$mylist=$("#mylist");//jQuery選擇到<ul>元素for(var i=0,l=top_100_list.length;i<1;i++){    $mylist.append("<li>"+top_100_list[i]+"</li>");}

以上代碼，每一個新添加的標籤元素都作為一個節點添加到視窗ID中，我們可以將整個元素字串在插入DOM之前全部建立好，減少DOM操作。代碼如下所示：

var top_100_list=[...],$mylist=$("#mylist"),top_100_li="";//這個變數將用來儲存我們的列表元素for(var i=0,l=top_100_list.length;i<1;i++){    top_100_li+="<li>"+top_100_list[i]+"</li>";}$mylist.html(top_100_li);

 

5、數組方式使用jQuery對象

使用jQuery選取器擷取結果是一個jQuery對象。然而，jQuery類庫會讓你感覺你正在使用一個定義了索引和長度的數組。在效能方面，建議使用簡單for或者while迴圈來處理，而不是$.each()，這樣代碼將更快。

//each()方法$.each(array,function(i){    array[i]=i;}//for代替each()方法var array=new Array();for(var i=0;i<array.length;i++){    array[i]=i;}

 

6、事件代理

也即事件委託，利用事件冒泡機制，通過綁定父節點，來對事件進行監聽。

//未使用事件代理$(‘myTable td‘).click(function(){    $(this).css(‘background‘,‘red‘);});//使用事件代理$(‘myTable‘).click(function(e){   var $clicked=$(e.target);    //e.target 捕捉到觸發的目標元素    $clicked.css(‘background‘,‘red‘);});

 

7、將你的代碼轉化成jQuery外掛程式

外掛程式可以使代碼具有更好的重用性，並且能夠有效協助你組織代碼。建立一個外掛程式代碼如下：

;(function($){    $.fn.yourPluginName=function(){    //Your code goes here    return this;})(jQuery);

 

8、使用join()來拼接字串

通過建立一個數組，然後迴圈，最後使用join()把數組轉化為字串，而不是使用"+"會有助於最佳化效能，尤其是長字串處理的時候。

var array=[];for(var i=0;i<=10000;i++){    array[i]=‘<li>‘+i+‘</li>‘;}$(‘#list‘).html(array.join(‘‘));

 

9、合理利用HTML5的Data屬性

HTML5的data屬性可以協助我們插入資料，特別是前後端的資料交換。jQuery的data()方法，有效利用HTML5的屬性，來自動得到資料。下面是個例子：

<div id="dl" data-role="page" data-last-value="43" data-options=‘{"name":"John"}‘></div>

為了讀取資料，你需要使用如下代碼：

$("#dl").data("role");    //"page"$("#dl").data("lastValue");    //43$("#dl").data("option").name;    //"John"

 

10、盡量使用原生的JavaScript方法

11、壓縮JavaScript

jQuery效能最佳化