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的子元素。在實際應用中若是隻要求獲取子元素，那麼就不該該使用後代選擇器。