JQuery有非常多的選取節點的方法，但是採用這些方法選取節點時所影響到的效能是完全不一樣的，用更合適的選擇器去選取節點，是使用JQuery時優化瀏覽器效能的一個可考慮方向。
下面進入測試：
首先，我們的建立一個有著複雜樣式的無序列表。
<div class="test-case-content">
<ul id="test-case" class="test">
<li class="item-01">Number_01</li>
<li class="item-02">Number_02</li>
<li class="item-03">Number_03</li>
<li class="item-04">Number_04</li>
<li class="item-05">Number_05</li>
<li class="item-06">Number_06</li>
<li class="item-07">Number_07</li>
<li class="item-08">Number_08</li>
<li class="item-09">Number_09</li>
</ul>
</div>複製程式碼呼叫瀏覽器時間除錯工具，建立測試函式：
function testTime(method){
console.time('testTime');
if(typeof method === 'function'){
for(var i=0;i<50000;i++){
method();
}
}
console.timeEnd('testTime');
}
複製程式碼我們採用選取迴圈50000次的無序列表中的一個方法，來測試每個選擇器對於瀏覽器的響應效能的影響。
1、將選擇器選取的節點快取，將大大的提升響應時間。
分別呼叫兩次方法，測試 未把節點快取 和 把節點快取 的時間。
調取控制檯，檢視兩種選擇器的執行時間：
可以發現，快取過的時間要優於未快取的兩倍以上。所以，使用合適的快取將一定程度的優化頁面響應速度。
2、儘可能不使用全域性選擇器，將一定程度的提升響應時間。
分別呼叫兩次方法，測試 使用id選擇 和 全域性選擇 的時間。
調取控制檯，檢視兩種選擇器的執行時間：
可以發現，避免選擇全域性的選擇器的時間要優於全域性選擇器選取的時間，所以，選擇器的使用上，要儘量避免使用全域性選擇。
3、約束的選取條件越少，選取時間越快。
分別呼叫兩次方法，測試 詳細的選取條件下選取 和 直接選取 的時間。
調取控制檯，檢視兩種選擇器的執行時間：
可以發現，我們不給選擇器新增條條框框，它越是能更快的找到方向。所以，在合理的情況下，可以使選取的條件約束少一點。
4、在以上的前提，越詳細層級裡的定位選擇，越會節約選擇時間。
分別呼叫兩次方法，測試 一般的選擇 和 較詳細的選擇 的時間。
調取控制檯，檢視兩種選擇器的執行時間：
可以發現，選擇定位的層級往裡，越是詳細，越能節約時間。所以，裡面的選取條件層級越深，可以使選取條件稍微詳細一點。
5、儘量少的使用JQuery自定義的選擇器，多使用JS或CSS原生支援的選擇。
分別呼叫兩次方法，測試 JQuery自定義選取 和 原本就支援的選擇器選取 的時間。
調取控制檯，檢視兩種選擇器的執行時間：
可以發現，JQuery自定義選擇器選取的明顯沒有原生的選擇器敏捷。所以，如果情況允許，儘量多的使用原生的選擇器選擇。
關於JQuery選擇器的效能優化方案，暫時整理到這裡，還有什麼要新增的歡迎評論留言。
程式設計有匠心，從小地方關注效能的優化，感謝你的閱讀。