前端效能最佳化jQuery效能最佳化

標籤：str   i++   script   res   targe   代理   改善   func   字元   

一、使用合適的選取器

$("#id");

1.使用id來定位DOM元素無疑是最佳提高效能的方式，因為jQuery底層將直接調用本地方法document.getElementById();如果這個 方式不能直接找到你需要的元素，那麼你可以考慮調用find()方法，代碼如下：

$("#domo").find("div");

使用以上代碼可以有效縮小你定位的DOM元素。

2.標籤選取器的效能也是不錯的，它是效能最佳化的第二選擇。

 

二、緩衝對象

在寫代碼時，我們一般喜歡這樣寫：

$("#domo p").bind("click",function(){.....});$("#domo p").css("color","green");$("#domo p").fadeIn(1000);

但是這樣寫的後果是：jQuery會在建立每一個選取器的過程中，尋找DOM，建立多個jQuery對象。

比較好的書寫方式如下：

 1 var $yuki=$("#domo p");//緩衝變數 2 $yuki.bind("click",function(){......}); 3 $yuki.css("color","green"); 4 $yuki.fadeIn(1000); 5  6 //上面的代碼還可以改善一下，如下 7  8 var $yuki=$("#domo p"); 9 $yuki.bind("click",function(){10     //...11 }).css("color","green").fadeIn(1000);

 

三、迴圈時的DOM操作

我們來看一段代碼：

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

以上代碼，我們將每一個新添加的標籤元素作為一個節點添加到容器ID中，每一次迴圈，都會調用到$mylist

所以更好的方式是儘可能的減少DOM操作，代碼如下：

var yuki=[...];var $mylist=$("#mylist");var result="";for(var i=0;i<$mylist.length;i++){   result+="<li>"+yuki[i]+"</li>";}//我們將整個元素字串在插入DOM元素(ul)之前全部建立好，這樣大大的減少了DOM操作$mylist.html(result);

 

四、事件代理

每一個JavaScript事件都會冒泡到父級節點。當我們需要給多個元素調用同一個函數時這點會很有用。比如，我們要為一個表格綁定這樣的行為：點擊td後，把背景色設定為紅色，代碼如下：

$("#myTable td").click(function(){   $(this).css("background","red");})

假設有100個td元素，在使用以上方式的時候，你綁定了100個事件，這將帶來很負面的效能影響，有沒有什麼更好的方式呢？

代替這種效率很差的元素事件監聽的方法就是：你只需向它們的父節點綁定一次事件，然後通過event.target擷取到點擊的當前元素。

代碼如下：

1 $("#myTable").click(function(e){2    var $clicked=$(e.target);//e.target捕捉到觸發的目標元素3    $clicked.css("background","red");4 })

還有一種方式是使用on() ，代碼如下：

$("#myTable").on("click","td",function(){   $(this).css("background","red");})

 

前端效能最佳化jQuery效能最佳化