jquery 選擇器的效率

　　如果你沒看過我上一篇的《jquery sizzle 選擇器淺析》請你先看一下，因為這一篇是上一篇的后續。本人拋出個思考題，想拋磚引玉，磚是拋出了，玉始終沒來，大概沒搶到回程的火車票。本人上一篇說 $('div img:eq(0)') 與 $('div img').first()  那個效率高，我只是推導后者較高，沒有進行測試。所以通過測試證實一下。

　　搜了一下，發現firejspt 還不錯，下載地址  http://code.google.com/p/firejspt/downloads/list  , 為了效果明顯。我把qq首頁的html拿過來測試，在頭部增加一下代碼

<script src="firejspt.js"></script>
<script src="jquery.js"></script>

在文件的底部寫測試的代碼 

function test1(){  
        for (var i=0;i<100;i++){  
           $("div .f1:eq(0)");  
        }  
    }  
   
   function test2(){  
        for (var i=0;i<100;i++){  
           $("div .f1").eq(0);  
        }  
    }  
   
  //需要監控性能的代碼功能塊2  
    function test3(){  
        for (var i=0;i<100;i++){  
             $("div .f1").first();  
        }  
    }  
   
 $(function(){  
  //執行性能監控測試  
      jspt.test(function(){test1();});  
      jspt.test(function(){test2();});  
      jspt.test(function(){test3();});  
 });

在firefox 的結果是

 

在谷歌的測試結果是

從結果來看，$("div .f1").eq(0) 和$("div .f1").first() 效率差不多，有時會差幾毫秒。  $("div .f1:eq(0)") 這個最慢了。所以印證我的推論。

總結

在復雜的頁面的，最好等選出來在用過濾選擇器，不要一次性寫在一個string里，因為當有nth|eq|gt|lt|first|last|even|odd 的時候，選擇器會從左向右，多次選擇，保存，過濾。效率很低。

 我的測試文件下載

http://files.cnblogs.com/liuzhang/test.zip