jQuery常用選取器效能測試

可以靈活的對頁面中的JS代碼片斷進行測試，使用的時候只要將FireJSPT的類庫檔案匯入即可：

<script type="text/javascript" src="firejspt.js"></script>

使用FireJSPT，本博對jQuery的常用的選取器在Firefox下做了一個測試，測試環境如下：

•作業系統：Windows 7旗艦版本
•瀏覽器：Firefox 3.6.13
•外掛程式：Firebug 1.60(未安裝其他外掛程式)
•jQuery版本：1.44
層級選取器(ul li)和find的對比
HTML結構如下：

代碼如下	複製代碼
<ul class="list"> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <!--省略455個li標籤--> <li><a href="#">jQuery常用選取器效能測試</a></li> </ul>

首先要感謝redky同志的提醒，原來我的測試過於片面導致測試結果很受質疑，我現在盡量類比真實的環境來重新進行測試。上面的HTML代碼複製了500個li標籤，分別寫了兩個函數testFun1和testFun2，並分別綁定一個點擊事件，JavaScript代碼如下：
/*引入1.44版的jQuery的庫檔案*/

代碼如下

複製代碼

<script type="text/javascript" src="jquery.js"></script> /*引入FireJSPT的庫檔案*/ <script type="text/javascript" src="firejspt.js"></script> <script type="text/javascript"> function testFun1(){ $(".list a").click(function() { alert("Hello World"); }); } function testFun2(){ $(".list").find("a").click(function() { alert("Hello World"); }); } /*分別調用2個函數進行測試*/ $(function(){ jspt.test(function(){ testFun1(); }); jspt.test(function(){ testFun2(); }); }); </script>

測試結果如下圖：

從上圖可以看出，如果頁面中只有一個ul.list的DOM節點，find的速度比層級選取器的要快。再把上面的整個ul.list>li的結構複製2次，複製後的結構如下：

代碼如下

複製代碼

<ul class="list"> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <!--省略455個li標籤--> <li><a href="#">jQuery常用選取器效能測試</a></li> </ul> <ul class="list"> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <!--省略455個li標籤--> <li><a href="#">jQuery常用選取器效能測試</a></li> </ul> <ul class="list"> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <li><a href="#">jQuery常用選取器效能測試</a></li> <!--省略455個li標籤--> <li><a href="#">jQuery常用選取器效能測試</a></li> </ul>

測試結果圖：

從上圖可以看出，如果有多個ul.list這樣的DOM節點，層級選取器的速度又比find快。那麼大致可以得出一個這樣的結論，如果頁面中的DOM節點是唯一的，那麼使用find來尋找它的子節點速度比層級選取器要快，如果頁面中有多個類名相同的節點，那麼使用find來尋找它的子節點速度比層級選取器要慢。

層級選取器(ul > li)和children的對比
用上面同樣的方法來進行測試，改動後的JavaScript代碼如下：

代碼如下	複製代碼
function testFun1(){ $(".list > li").click(function() { alert("Hello World"); }); } function testFun2(){ $(".list").children("li").click(function() { alert("Hello World"); <A href="/">australian casino sites</A> }); }

只有一個ul.list的DOM節點的測試結果圖：

三個ul.list的DOM節點測試結果圖：

這個差距不大，children稍勝一籌，這個結果與原來用for迴圈的測試方法完全相反。

id和class選取器的對比
HTML結構如下：

代碼如下	複製代碼
<div id="test">jQuery常用選取器效能測試</div>  <div class="test">jQuery常用選取器效能測試</div>

改動後的JavaScript代碼如下：

代碼如下	複製代碼
function testFun1(){  for(var i = 0;i < 1000;i ){   $("#test").click(function() { alert("Hello World"); });  } } function testFun2(){  for(var i = 0;i < 1000;i ){   $(".test").click(function() { alert("Hello World"); });  } }

測試結果圖：

瞭解JavaScript的都知道id選取器肯定比class選取器快，至於快多少這下應該有個比較靠譜的答案了。

Jquery選取器常用例子

獲得只有Name的隱藏Input的值

代碼如下	複製代碼
$("input[type=hidden][name=隱藏Input的名稱]").val()  或  $("input[name=隱藏Input的名稱]:hidden").val()

radio設值

代碼如下	複製代碼
$("input[type=radio][value=值]").attr("checked",true); eg.$("input[type=radio][value=${order.paymentMethod}]").attr("checked",true);

jQuery有非常強大的Sizzle引擎來實現選取器，jQuery做了最佳化，他們能很好的工作，你一般不必擔心太多。然而，我們可以稍微做一些改進，將可以使你的指令碼略有提高。

一般在jquery中能不要用Sizzle引擎就不要用，當然前面說了只要有可能，就盡量使用.find()方法。比如：

代碼如下	複製代碼
$('#someDiv p.someClass').hide(); $('#someDiv').find('p.someClass').hide();

上面兩行代碼執行的結果是完全一樣的，但是下面一句的效率要比上面一句的執行效率高。
現代瀏覽器（除IE6，IE7）都有QuerySelectorAll支援，能允許你像CSS選取器一樣擷取對象，而不需要用到jQuery中的Sizzle引擎。jQuery會在使用自己的引擎之前檢查是否存在這個函數。

對於IE6/IE7，就需要jQuery使用Sizzle引擎，jQuery會把你的選取器轉化成一個數組，並且通過從右往左來迭代匹配。通過Regex匹配頁面每一個元素，所以你的可以盡量減少選取器的層級，儘可能的使用最右邊的選取器，比如使用ID選取器等；這個規則和我們的css的尋找規則是一直的，如果你要最佳化css選取器也要知道這個規則：從右往左來迭代匹配！

尺度把握：

1.保持代碼簡單

2.儘可能的使用find()尋找，使用瀏覽器的原生尋找函數

3.儘可能使用最右邊的選取器，比如ID等

或條件：（用逗號隔開）

如：

代碼如下	複製代碼
$("#tableList").find("tr.row_even,tr.row_odd").click(function() {     alert('test');    });