之前，我們減少字節數和請求次數以及加載順序以使頁面加載的更快。如今，我們越來越多的注意到另一個影響網站性能的部分–CPU利用率。使用 jQuery和其他JavaScript框架，使節點選擇和DOM操作變得越來越容易，如果使用不當，有可能影響整個網頁的響應速度，下面列舉11個更有 效的使用jQuery庫：
1、總是使用#id去尋找element.
在jQuery中最快的選擇器是ID選擇器 ($(‘#someid’)). 這是因為它直接映射為JavaScript的getElementById()方法。
選擇單個元素
<div id=”content”>
<form method=”post” action=”/”>
<h2>Traffic Light</h2>
<ul id=”traffic_light”>
<li><input type=”radio” name=”light” value=”red” /> Red</li>
<li><input type=”radio” name=”light” value=”yellow” /> Yellow</li>
<li><input type=”radio” name=”light” value=”green” /> Green</li>
</ul>
<input id=”traffic_button” type=”submit” value=”Go” />
</form>
</div>
選擇button的性能不好的一種方式：
var traffic_button = $(‘#content .button’);
取而代之的是直接選擇button:
var traffic_button = $(‘#traffic_button’);
選擇多個元素
在我們討論選擇多個元素的時候，我們真正需要知道的是DOM的遍歷和循環才是性能低下的原因。為了盡量減少性能損失， 總是使用最近的父ID去尋找。
var traffic_lights = $(‘#traffic_light input’);
2、在Classes前面使用Tags
在jQuery中第二快的選擇器就是Tag選擇器 ($(‘head’)). 而這是因為它直接映射到JavaScript的getElementsByTagName()方法。
<div id=”content”>
<form method=”post” action=”/”>
<h2>Traffic Light</h2>
<ul id=”traffic_light”>
<li><input type=”radio” name=”light” value=”red” /> Red</li>
<li><input type=”radio” name=”light” value=”yellow” /> Yellow</li>
<li><input type=”radio” name=”light” value=”green” /> Green</li>
</ul>
<input id=”traffic_button” type=”submit” value=”Go” />
</form>
</div>
總是在一個Class前面加上一個tag名字（記得從一個ID傳下來）
var active_light = $(‘#traffic_light input.on’);注意：在jQuery裡Class選擇器是最慢的一個選擇器;在IE中它循環整個DOM。可能的話盡量避免使用它。不要在ID前面加Tags。例如，它會因為去循環所有的<div>元素去尋找ID為content的<div>，而導致很慢。
var content = $(‘div#content’);按照同樣的思路，從多個ID傳下來是冗余的。
var traffic_light = $(‘#content #traffic_light’);
3、緩存jQuery對象
養成保存jQuery對象到一個變量上（就像上面的例子）的習慣。例如，不要這樣做：
$(‘#traffic_light input.on).bind(‘click’, function(){…});
$(‘#traffic_light input.on).css(‘border’, ’3px dashed yellow’);
$(‘#traffic_light input.on).css(‘background-color’, ‘orange’);
$(‘#traffic_light input.on).fadeIn(‘slow’);
取而代之，首現保存jQuery變量到一個本地變量後，再繼續你的操作。
var $active_light = $(‘#traffic_light input.on’);
$active_light.bind(‘click’, function(){…});
$active_light.css(‘border’, ’3px dashed yellow’);
$active_light.css(‘background-color’, ‘orange’);
$active_light.fadeIn(‘slow’);
提示：使用$前辍表示我們的本地變量是一個jQuery包集。記住，不要在你的應該程序裡出現一次以上的jQuery重復的選擇操作。 額外提示：延遲存儲jQuery對象結果。
如果你想在你的程序的其它地方使用jQuery結果對象（result object(s)），或者你的函數要執行多次，要把它緩存在一個全局范圍的對象裡。通過定義一個全局容器保存jQuery結果對象，就可以在其它的函數裡引用它。
// Define an object in the global scope (i.e. the window object)
window.$my ={
// Initialize all the queries you want to use more than once
head : $(‘head’),
traffic_light : $(‘#traffic_light’),
traffic_button : $(‘#traffic_button’)};
function do_something(){
// Now you can reference the stored results and manipulate them
var script = document.createElement(‘script’);
$my.head.append(script);
// When working inside functions, continue to save jQuery results
// to your global container.
$my.cool_results = $(‘#some_ul li’);
$my.other_results = $(‘#some_table td’);
// Use the global functions as you would a normal jQuery result
$my.other_results.css(‘border-color’, ‘red’);
$my.traffic_light.css(‘border-color’, ‘green’);
}
4、更好的利用鏈
前面的例子也可以這樣寫：
var $active_light = $(‘#traffic_light input.on’);
$active_light.bind(‘click’, function(){…})
.css(‘border’, ’3px dashed yellow’)
.css(‘background-color’, ‘orange’)
.fadeIn(‘slow’);
這樣可以讓我們寫更少的代碼，使JavaScript更輕量。
5、使用子查詢
jQuery允許我們在一個包集上附加其它的選擇器。因為我們已經在本地變量裡保存了父對象這樣會減少以後在選擇器上的性能開銷。
<div id=”content”>
<form method=”post” action=”/”>
<h2>Traffic Light</h2>
<ul id=”traffic_light”>
<li><input type=”radio” name=”light” value=”red” /> Red</li>
<li><input type=”radio” name=”light” value=”yellow” /> Yellow</li>
<li><input type=”radio” name=”light” value=”green” /> Green</li>
</ul>
<input id=”traffic_button” type=”submit” value=”Go” />
</form>
</div>
例如，我們可以利用子查詢緩存active和inactive lights以便後面的操作。
var $traffic_light = $(‘#traffic_light’),
$active_light = $traffic_light.find(‘input.on’),
$inactive_lights = $traffic_light.find(‘input.off’);
提示：可以用逗號隔開一次定義多個本地變量，這樣可以節省一些字節。
6、限制直接對DOM操作
DOM操作的基本做法是在內存中創建DOM結構，然後再更新DOM結構。這不是jQuery最好的做法，但對JavaScript來講是高效的。直接操作DOM結構性能是低下的。 例如，如果你需要動態創建一列元素，不要這樣做：
var top_100_list = [...], // assume this has 100 unique strings
$mylist = $(‘#mylist’); // jQuery selects our <ul> element
for (var i=0, l=top_100_list.length; i<l; i++){
$mylist.append(‘<li>’ + top_100_list + ‘</li>’);
}
取而代之，我們希望在插入DOM結構之前先在一個字符串裡創建一套元素。
代碼
var top_100_list = [...], // assume this has 100 unique strings
$mylist = $(‘#mylist’), // jQuery selects our <ul> element
top_100_li = “”; // This will store our list items
for (var i=0, l=top_100_list.length; i<l; i++){
top_100_li += ‘<li>’ + top_100_list + ‘</li>’;
}
$mylist.html(top_100_li);
更快的做法，在插入DOM結構之前我們應該總是在一個父節點裡包含許多元素
var top_100_list = [...], // assume this has 100 unique strings
$mylist = $(‘#mylist’), // jQuery selects our <ul> element
top_100_ul = ‘<ul id=”#mylist”>’; // This will store our entire unordered list
for (var i=0, l=top_100_list.length; i<l; i++){
top_100_ul += ‘<li>’ + top_100_list + ‘</li>’;
}
top_100_ul += ‘</ul>’; // Close our unordered list
$mylist.replaceWith(top_100_ul);
如是你照著上面的做了還是對性能有些迷惑的話，可以參考以下內容：
試一下jQuery提供的Clone()方法。Clone()方法創建節點數的拷貝，隨後你可以在這個副本中進行操作。
使用DOM DocumentFragments. As the creator of jQuery points out, 比直接操作DOM性能上更好. 先創建你需要的結構(就像我們上面用一個字符串做的一樣), 然後使用jQuery的 insert or replace methods.
7、事件委托（又名：冒泡事件）
除 非特別說明，每一個JavaScript事件（如click, mouseover 等）在DOM結構樹上都會冒泡到它的父元素上。如果我們想讓很多elements(nodes)調用同一個function這是非常有用的。取而代之的是 你可以只對它們的父級綁定一次，而且可以計算出是哪一個節點觸發了事件，而不是綁定一個事件監聽器到很多節點上這種效率低下的方式。例如，假如我們要開發 一個包含很多input的
