本文中用到的jQuery版本為v1.12.0
- 使用最新版本的jQuery庫(kù)
jQuery的每一新版本都會(huì)較上一版進(jìn)行bug修復(fù)和優(yōu)化，同時(shí)也會(huì)包含一些創(chuàng)新涣楷，所以建議使用最新版本的jQuery來(lái)提高性能要注意的是：更換版本之后，不要忘記測(cè)試你的代碼讶泰。畢竟有時(shí)候不是完全向后兼容的毅待。（如1.7版本后使用
on來(lái)代替bind，live） - 使用合適的選擇器
-
$("#id")
使用id來(lái)定位DOM元素?zé)o疑是最佳提高性能的方式，因?yàn)閖Query底層將直接調(diào)用本地方法document.getElementById()伊佃。jQuery源碼--id選擇器.png
熟悉JS的人都了解這個(gè)方法直接通過(guò)元素id返回對(duì)應(yīng)的元素窜司。當(dāng)然，如果該方式不能直接獲取所需元素航揉，可以考慮使用.find()方法塞祈。$("#parent").find(".child");使用上面的代碼可以有效的縮小定位的DOM元素。為了提高性能帅涂，建議從最近的id元素開(kāi)始往下檢索议薪。
-
$("input"),$("div")
標(biāo)簽選擇器的性能也是不錯(cuò)的，它是性能優(yōu)化的第二選擇媳友，因?yàn)閖Query將直接調(diào)用本地方法document.getElementsByTagName()來(lái)定位DOM元素斯议。
jQuery源碼--tagName.png -
$(".class")
這種方法較我們來(lái)說(shuō)有些許復(fù)雜。對(duì)于較新的瀏覽器如常用的chrome醇锚，Firefox等哼御，支持本地方法document.getElementsByClassName()，而對(duì)于老版本的瀏覽器如IE8就只能靠DOM搜索的方式來(lái)實(shí)現(xiàn)jQuery源碼--className.png
這方法無(wú)疑對(duì)性能產(chǎn)生較大的影響焊唬，所以建議大家有選擇性的使用它恋昼。
$("[attribute=value]")
利用屬性定位DOM，本地JS方法中并沒(méi)有直接地實(shí)現(xiàn)赶促，大多都是使用DOM搜索方式來(lái)達(dá)到效果液肌，很多現(xiàn)代瀏覽器支持document.querySelectorAll方法，但是不同瀏覽器間的性能還是有區(qū)別鸥滨。
總體來(lái)說(shuō)嗦哆，使用給方式定位DOM元素，性能并不是非常的理想婿滓。$(":hidden")
和上面利用屬性定位DOM元素的方法類(lèi)似老速，這種偽選擇器同樣沒(méi)有直接的JS方法實(shí)現(xiàn)，并且jQuery需要遍歷每一個(gè)元素來(lái)定位該選擇器空幻，這將對(duì)應(yīng)用帶來(lái)比較大的性能問(wèn)題烁峭。能不用盡量不用該方法。
假如堅(jiān)持使用這種方式秕铛，可以先使用ID選擇器定位父元素约郁，再使用該選擇器，這對(duì)性能優(yōu)化有幫助但两。
$("#parent_id").find(":hidden");
$("#radio_group").filter(":checked");
以上是使用選擇器的基本規(guī)則鬓梅，性能自上而下依次下降，大家在開(kāi)發(fā)中可以遵循這個(gè)簡(jiǎn)單的優(yōu)化性能規(guī)則谨湘。
###無(wú)聊的性能對(duì)比時(shí)間
```
function getEleById () {
beginTime = new Date();
for (var i = 0; i < count; i++) {
var tempDOM = document.getElementById('test');
};
endTime = new Date();
console.log("使用 document.getElementById('test') 方法獲取元素花時(shí)："+(endTime - beginTime));
}
function jqueryId () {
beginTime = new Date();
for (var i = 0; i < count; i++) {
var tempDOM = $("#test");
};
endTime = new Date();
console.log("使用 $('#test') 方法獲取元素花時(shí)："+(endTime - beginTime));
}
function jqueryTagName () {
beginTime = new Date();
for (var i = 0; i < count; i++) {
var tempDOM = $("div");
};
endTime = new Date();
console.log("使用 $('div') 方法獲取元素花時(shí)："+(endTime - beginTime));
}
function jqueryClassName () {
beginTime = new Date();
for (var i = 0; i < count; i++) {
var tempDOM = $(".test");
};
endTime = new Date();
console.log("使用 $('.test') 方法獲取元素花時(shí)："+(endTime - beginTime));
}
function jqueryAttribute () {
beginTime = new Date();
for (var i = 0; i < count; i++) {
var tempDOM = $("[data-id=test]");
};
endTime = new Date();
console.log("使用 $('[data-id=test]') 方法獲取元素花時(shí)："+(endTime - beginTime));
}
function jqueryPseudoClass () {
beginTime = new Date();
for (var i = 0; i < count; i++) {
var tempDOM = $(":hidden");
};
endTime = new Date();
console.log("使用 $(':hidden') 方法獲取元素花時(shí)："+(endTime - beginTime));
}
上述代碼的測(cè)試結(jié)果為：
>小Tips：
>1. 盡量使用ID選擇器芥丧。
>2. 盡量給選擇器指定上下文。
####第一部分已完結(jié)坊罢。未完待續(xù)续担。