jquery 功能最佳化

標籤：

1.總是從ID選取器開始繼承。
在jQuery中最快的選取器是ID選取器，因為它直接來自於javascript的getelementById()方法。
例如：
<div id="warp">
<div id="content">

<ul>

<li>1</li> 

<li>2</li> 

<li>3</li>
</ul>
<input type="button" class="input_btn" id="submit" value="submit" />

</div>
</div>
如果使用 $("#content .input_btn")則會很大的影響jQuery的效能，最快的效率是使用$("#submit")。如果涉及到DOM遍曆迴圈時，未來提供效能，建議使用最近的ID選取器。如$(#content li)。

2.在class前使用tag（標籤名）
在jQuery中第二快的選取器是標籤名。和ID選取器一樣它來自於javascript的getElementsByTagName_r()方法。
使用方法如：$("div")；
使用標籤名選取器需要注意幾點:
1).標籤名或不不用跟隨ID，如$("div #content")。
2).不用在ID後面使用ID，如$("#demo #line")。

3.將jQuery對象緩衝起來
就是要告訴我們，要將jQuery對象使用變數緩衝起來。如下代碼：
$("#content .btn p").css(.........
$("#content .btn p").css(.........
$("#content .btn p").show().........
這樣是不好的編寫，正確編寫如下：
var $demo=$("#content .btn p");
$demo.css(......
$demo.css(......
$demo.show().....
永遠不要讓相同的選取器出現在同一段代碼中

4.直接對DOM操作進行限制
這裡的基本思想是在記憶體中建立你所需要的東西，然後更新DOM。
如迴圈添加DOM節點：
for(var i=0;i<100;i++){
    $("#showli").appent("<li>"+i+"</li>");
}
這是不好的編寫方法，正確的編寫方法如下：
var html="";
for(var i=0;i<100;i++){
  html+="<li>"+i+"</li>";
}
$("#showli").appent(html);

5.冒泡
如果在編寫代碼中你需要為很過個標籤添加同一個事件是，那麼你只需要對它的父標籤添加一次事件。
如為表格裡的td標籤添加點擊事件：
$("#mytable td").onclick(function(){
    //程式碼片段,對td進行操作
    ......
});
則可以改寫為：
$("mytable").onclick(function(e){
    var $tag=$(e.target);
    //程式碼片段，對$tag進行操作
});

6.延遲到$(windwo).load
我們通常把任何東西掛到$(function(){});裡面，它可以再也沒渲染時就執行。往往裡面的函數體會影響到也沒一直在載入狀態。這時你可以使用$(window).load(function(){});方法這減少也沒再載入時暫用的CUP。一些特效、動畫、拖放等等都適合使用。

7.壓縮javascript
使用指令碼壓縮公用程式壓縮和最小化你的javascript檔案。在壓縮之前要確保代碼的正確性。否則頁面會出現js報錯。

8.給選取器一個上下文
jquery中可以指定上下文：
jquery(expression,context),它可以縮小選取器的搜尋範圍，減少時間，提高效率。
如：$(".a_hover",$("#mycontent"));

9.慎用.live()方法
如果可以，盡量不要使用該方法。它可以為在代碼執行時新增的元素動態綁定事件，但是比較佔用資源，所以盡量不要使用。

10.子選取器和後代選取器
後代選取器如：$("#mycontent p");它選擇ID為mycontent裡面的所有元素。
子選取器如：$("#mycontent > p");它只選擇ID為mycontent的子項目。
在實際應用中如果只要求擷取子項目，那麼就不應該使用後代選取器。

jquery 功能最佳化