盡量使用最新版本的jQuery
jQuery每一個(gè)新的版本都會(huì)較上一個(gè)版本進(jìn)行Bug修復(fù)和一些優(yōu)化，同時(shí)也會(huì)包含一些創(chuàng)新贼涩，所以建議使用最新版本的jQuery來提高性能。不過需要注意和補(bǔ)充的是毒返，已建項(xiàng)目不要輕易的更換版本访敌，畢竟有時(shí)候新版本不完全是向后兼容的。
使用合適的選擇器
$("#id")
使用id定位DOM元素?zé)o疑是最佳性能的方式轰枝，因?yàn)閖Query底層將直接調(diào)用原生方法document.getElementById劫扒。其次，如果id不能直接定位到所需元素狸膏，可以考慮調(diào)用find()方法沟饥。
$("div")
標(biāo)簽選擇器性能也相對(duì)不錯(cuò)，因?yàn)閖Query會(huì)直接調(diào)用原生方法document.getElementsByTagName來定位DOM元素,最好是配合$('#id')和find()方法來使用。
$(".class")
使用class來定位元素集合相對(duì)會(huì)低效一些贤旷，因?yàn)樵诜乾F(xiàn)代瀏覽器上不支持document.getElementsByClassName()广料，只能通過DOM搜索的方式來實(shí)現(xiàn)，所以最好也是配合$('#id')和find()方法來使用
另外還有兩組選擇器分別是屬性選擇器$("[attribute=value]")和偽元素選擇器$(":hidden")幼驶，因單獨(dú)使用性能不理想艾杏，所以都建議使用ID選擇器定位到最近的父級(jí)元素并配合find()方法使用。
緩存對(duì)象
永遠(yuǎn)不要讓同一個(gè)選擇器出現(xiàn)多次
循環(huán)時(shí)的DOM操作
每1次操作DOM的性能開銷都很大盅藻，使用臨時(shí)變量來存儲(chǔ)购桑，將DOM的操作次數(shù)降至最低。
var top_100_list=['a','b''c','d','e'],
listBox = $('#listBox'),
top_100_li="";
for(var i=0,l=top_100_list.length;i<l;i++){
top_100_li+="<li>"+top_100_list[i]+"</li>";
}
listBox.append(top_100_li);
數(shù)組方式使用jQuery對(duì)象
使用jQuery選擇器獲取結(jié)果是一個(gè)jQuery對(duì)象氏淑。然而勃蜘，jQuery會(huì)讓人感覺正在使用一個(gè)定義了索引和長(zhǎng)度的數(shù)組。在性能方面假残，建議使用原生的for()或者while() 比 each()方法執(zhí)行更快缭贡。
事件委托
每一個(gè)JavaScript事件都會(huì)冒泡到父級(jí)節(jié)點(diǎn)。當(dāng)我們需要給多個(gè)元素調(diào)用同一個(gè)事件函數(shù)時(shí)候這一點(diǎn)會(huì)很有用辉懒。
比如我們要為一個(gè)表格綁定一個(gè)function阳惹，點(diǎn)擊td之后，將其背景設(shè)置為紅色眶俩。
第一反應(yīng)一般會(huì)這樣寫：
$('#myTable td').click(function(){
$(this).css('background','red');
})
假如有100個(gè)td莹汤，那么就綁定了100次事件，顯然這將帶來很大的性能負(fù)擔(dān)颠印。
代替這種效率很差的多個(gè)元素事件監(jiān)聽的方法就是說体啰，只需要向它的父節(jié)點(diǎn)綁定1次事件，然后通過event.target來獲取到當(dāng)前點(diǎn)擊元素嗽仪。使用事件委托優(yōu)化之后：
$('#maTable').on('click','td',function(){
$(this).css('background','red');
})
使用join()來拼接長(zhǎng)字符串
使用join來處理長(zhǎng)字符串（返回渲染DOM）拼接確實(shí)有助于性能優(yōu)化.
創(chuàng)建一個(gè)數(shù)組荒勇，然后循環(huán)，使用join()把數(shù)組轉(zhuǎn)為字符串
var arr = [];
for (var i=0;i<=1000;i++){
arr[i] ='<li></li>';
}
$('#list').append(arr.join(""));
合理的利用Data自定義屬性
<!--Set-->
<div id="dl" data-role="page" data-last-value ="43" data-options='{"name":"jack"}'></div>
//Get
var dl = $('#dl');
dl.data("role"); //"page"
dl.data("lastValue"); //43
dl.data("options").name; //jack
