本文中用到的jQuery版本為v1.12.0
1. 緩存對象
在寫jQuery代碼的時候空骚，有些開發(fā)人員喜歡這么寫：
$('#id').css('color', 'white');
$('#id').on('click', function(event) {...});
$('#id').find('.childNode').siblings().hide();
$('#id').fadeIn('500');
當(dāng)然纺讲，開發(fā)過程中的跳躍思維會導(dǎo)致你有可能書寫類似這樣的代碼，這無可厚非囤屹，但是這么書寫導(dǎo)致的是：jQuery會在創(chuàng)建每一個選擇器的過程中熬甚，查找DOM，創(chuàng)建多個jQuery對象肋坚。相對應(yīng)的则涯，比較良好的書寫方式如下：
var $id = $('#id');
$id.css('color', 'white');
$id.on('click', function(event) {...});
$id.find('.childNode').siblings().hide();
$id.fadeIn('500');
當(dāng)然复局，使用jQuery的鏈?zhǔn)讲僮鲿勾a更加簡潔：
var $id = $('#id');
$id.css('color', 'white')
.on('click', function(event) {...})
.find('.childNode').siblings().hide()
.fadeIn('500');
這里只是為了說明使用緩存變量的重要性冲簿，這和Java開發(fā)中不要隨意的創(chuàng)建對象一樣粟判，可以幫助你有效地提高代碼的執(zhí)行效率。
如果在其他函數(shù)也用到了該jQuery對象峦剔，那么可以把它緩存到全局環(huán)境中档礁。如：
window.$me = {
id1 = $('#id1'),
head = $('#title')
};
function test () {
$me.id1.css('color', 'white')
.on('click', function(event) {...})
.find('.childNode').siblings().hide()
.fadeIn('500');
$me.head.text('I am a Head');
}
切記：永遠(yuǎn)不要讓相同的選擇器在你的代碼中出現(xiàn)多次。
2. 循環(huán)時的DOM操作
使用jQuery可以很方便的對DOM節(jié)點進(jìn)行增刪查改吝沫，但是在一些循環(huán)中呻澜，如for()，while()惨险，$.each()中處理節(jié)點時羹幸，如下例：
$ul = $('#ul-list');
$.each(dataArray, function(index, val) {
$ul.append('<li>'+dataArray[index]+'</li>');
});
在上面代碼中，將dataArray中的數(shù)據(jù)逐個加入到ul中辫愉，期間每一條數(shù)據(jù)都通過.append()將新節(jié)點添加到容器中栅受。實際上jQuery操作消耗的性能也不低，所以更好的方式是盡可能的減少DOM操作恭朗∑聊鳎可以將整個元素字符串在插入DOM之前全部創(chuàng)建好。如：
var $ul = $('#ul-list');
var html = "";
$.each(dataArray, function(index, val) {
html += '<li>'+dataArray[index]+'</li>';
});
$ul.html(html);
3. 數(shù)組方式使用jQuery對象
使用jQuery選擇器獲取的結(jié)果是一個jQuery對象痰腮。然而而芥，jQuery類庫會讓你感覺你在使用一個定義了索引和長度的數(shù)組。在性能方面膀值，使用for()或者while()來處理比使用$.each()要快棍丐。
同時，檢查該數(shù)組的長度也是一個檢查jQuery對象是否存在的方法沧踏。如：
var $content = $('#content');
if ($content) {...};//總是返回true
if ($content.length) {...};//擁有#content該元素時才返回true
4. 事件代理
每一個JavaScript事件（如：click歌逢，mouseover等）都會冒泡到父級節(jié)點。當(dāng)我們需要給多個元素調(diào)用同個函數(shù)時悦冀，這點會很有用趋翻。比如，我們要唯一個表格綁定這樣的行為：點擊td后盒蟆，把背景色設(shè)置為紅色踏烙，代碼如下：
$("#myTabel td").click(function(event){
$(this).css('background-color','red');
})
假設(shè)有100個td，在使用上述方式的時候历等，就綁定了100個事件讨惩，這將帶來很負(fù)面的性能影響。
代替這種效率較低的多元素事件監(jiān)聽的方法就是寒屯，只需向它們的父節(jié)點綁定一次事件荐捻，然后通過event.tartget獲取點擊到的當(dāng)前元素黍少，代碼如下：
$("#myTabel").click(function(event){
var $td = $(event.target);
$td.css('background-color','red');
})
在改進(jìn)方式中，只為一個元素綁定了一個事件处面，顯然這種方式的性能要優(yōu)于之前那種厂置。同時，在jQuery 1.7版本中提供了一個新的方式：on()魂角，來幫助你將整個事件監(jiān)聽封裝到一個便利的方法中：
$("#myTabel").on('click', 'td', function(event){
$(this).css('background-color','red');
})
5.盡量使用原生的JavaScript方法
下面的代碼昵济，用來判斷多選框是否選中：
var $cb = $('#checkbox');
$cb.click(function(e){
if($cb.is(':checked')){
alert('你已選中該多選框');
}
});
這里使用了jQuery提供的is()方法來判斷多選框是否選中，但這里可以直接使用原生的JavaScript的方法：
var $cb = $('#checkbox');
$cb.click(function(event) {
if (this.checked) {alert('checked')}
});
毋庸置疑野揪，第二種方式效率高于第一種访忿，因為它不需要再去調(diào)用其他函數(shù)。
還有很多：
//$(this).css('color','red');
this.style.color = 'red';//better;
//$('<p>');
$(document.createElement('p'));//better;
方法的選擇很重要斯稳，有時候海铆，也許你根本不需要jQuery。
6.壓縮JavaScript
現(xiàn)在的web項目總是離不開大量的JavaScript挣惰，而js文件的體積越來越大卧斟，隨之也影響到頁面的感知新能。因此通熄，需要對JavaScript文件進(jìn)行壓縮唆涝。
壓縮的方法和工具在網(wǎng)上很多，大家可以自行搜索唇辨。
完廊酣。
