jQuery優化性能的十種方法
1，總是從ID選擇器開始繼承
例如：
<div id="content"> <form method="post" action="#"> <h2>成績</h2> <ul id="grades"> <li><input type="radio" class="good" name="grade" value="fine" /> 優秀</li> <li><input type="radio" class="good" name="grade" value="good" />良好</li> <li><input type="radio" class="bad" name="grade" value="bad" />差</li> </ul> <input class="button" id="grade_button" type="submit" value="提交" /> </form> </div>
我們要找到提交按鈕：
效率低：var btn = $("#content .button")
高效率：var btn = $("#grade_button")
2.在class前使用tag(標簽名)
選擇優秀和良好的單選框
那麽可以使用一個tag name來限制(修飾)class ，如下所示：
var active_grade = $(“input.good”);
在使用tag來修飾class的時候，我們需要註意以下幾點：
（1） 不要使用tag來修飾ID，如下所示：
var content = $(“div #content”);
這樣一來，選擇器會先遍歷所有的div元素，然後匹配#content。
（2）不要畫蛇添足的使用ID來修飾ID，如下所示：
var traffic_light = $(“#content #
3.將jQuery對象緩存起來
例如：
$("#grades input.on").bind("click", function(){ });
$("#grades input.on").css("border", "1px dashed yellow");
上面的代碼是正確的，但是效率很低，換成如下：
var $grades = $("#grades input.on");
$grades .bind("click", function(){ });
$grades .css("border", "1px dashed yellow");
4.對直接的DOM操作進行限制
例如：
var list10 = []; //假設這裏是10個不同的字符串
$mylist = $("#mylist"); //jQuery 選擇到 <ul> 元素
for (var i=0, l=list10.length; i<l; i++){
$mylist.append("<li>" + list10[i] + "</li>");
}
我們應該將整套元素字符串在插入進dom中之前先全部創建好
var top_100_list = [],$mylist = $("#mylist"), top_100_li = ""; // 這個變量將用來存儲我們的列表元素
for (var i=0, l=top_100_list.length; i<l; i++){
top_100_li += "<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);
5.冒泡
除非在特殊情況下, 否則每一個js事件(例如:click, mouseover等.)都會冒泡到父級節點。
當我們需要給多個元素調用同個函數時這點會很有用。
代替這種效率很差的多元素事件監聽的方法就是, 你只需向它們的父節點綁定一次。
比如, 我們要為一個擁有很多輸入框的表單綁定這樣的行為: 當輸入框被選中時為它添加一個class
傳統的做法是，直接選中input，然後綁定focus等
$("#entryform input").bind("focus", function(){
$(this).addClass("selected");
}).bind("blur", function(){
$(this).removeClass("selected");
});
當然上面代碼能幫我們完成相應的任務，但如果你要尋求更高效的方法，請使用如下代碼：
$("#entryform").bind("focus", function(e){
var $cell = $(e.target); // e.target 捕捉到觸發的目標元素
$cell.addClass("selected");
}).bind("blur", function(e){
var $cell = $(e.target);
$cell.removeClass("selected");
});
6.推遲到 $(window).load
jQuery對於開發者來說有一個很誘人的東西, 可以把任何東西掛到$(document).ready下。
盡管$(document).rady 確實很有用， 它可以在頁面渲染時，其它元素還沒下載完成就執行。
如果你發現你的頁面一直是載入中的狀態，很有可能就是$(document).ready函數引起的。
你可以通過將jQuery函數綁定到$(window).load 事件的方法來減少頁面載入時的cpu使用率。
它會在所有的html(包括iframe)被下載完成後執行。
一些特效的功能，例如拖放, 視覺特效和動畫, 預載入隱藏圖像等等，都是適合這種技術的場合
7.壓縮JavaScript
在線壓縮地址: http://dean.edwards.name/packer/
壓縮之前，請保證你的代碼的規範性，否則可能失敗，導致Js錯誤。
8.盡量使用ID代替Class。
前面性能優化已經說過，ID選擇器的速度是最快的。所以在HTML代碼中，能使用ID的盡量使用ID來代替class。
看下面的一個例子
9.給選擇器一個上下文
jQuery選擇器中有一個這樣的選擇器，它能指定上下文。
jQuery( expression, context );
通過它，能縮小選擇器在DOM中搜索的範圍，達到節省時間，提高效率。
普通方式：
$(‘.myDiv’)
改進方式：
$(‘.myDiv’ , $(“#listItem”) )
10.慎用 .live()方法（應該說盡量不要使用）
這是jQuery1.3.1版本之後增加的方法，這個方法的功能就是為 新增的DOM元素 動態綁定事件。
但對於效率來說，這個方法比較占用資源。所以請盡量不要使用它。
jQuery優化性能的十種方法