2009-08-05 67 views
16

我不確定是否在選擇器中使用:first:eq(0)。我很確定他們會一直返回同一個對象,但是比另一個更快?jQuery's:first和:eq(0)選擇器在功能上是否等效?

我敢肯定,這裏的某個人必須對這些選擇器進行基準測試,而且我不確定測試其速度的最佳方法。

更新:這是我跑的替補:

/* start bench */ 
for (var count = 0; count < 5; count++) { 
    var i = 0, limit = 10000; 
    var start, end; 
    start = new Date(); 
    for (i = 0; i < limit; i++) { 
     var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:eq(0)"); 
    } 
    end = new Date(); 
    alert("div.RadEditor.Telerik:eq(0) : " + (end-start)); 
    var start = new Date(); 
    for (i = 0; i < limit; i++) { 
     var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:first"); 
    } 
    end = new Date(); 
    alert("div.RadEditor.Telerik:first : " + (end-start)); 
    start = new Date(); 
    for (i = 0; i < limit; i++) { 
     var radeditor = $thisFrame.parents("div.RadEditor.Telerik")[0]; 
    } 
    end = new Date(); 
    alert("(div.RadEditor.Telerik)[0] : " + (end-start)); 
    start = new Date(); 
    for (i = 0; i < limit; i++) { 
     var $radeditor = $($thisFrame.parents("div.RadEditor.Telerik")[0]); 
    } 
    end = new Date(); 
    alert("$((div.RadEditor.Telerik)[0]) : " + (end-start)); 
} 
/* end bench */ 

我認爲第三個將是最快的,第4是最慢的,但在這裏,我想出了一個結果:

FF3: :eq(0) :first [0] $([0]) 
trial1 5275 4360 4107 3910 
trial2 5175 5231 3916 4134 
trial3 5317 5589 4670 4350 
trial4 5754 4829 3988 4610 
trial5 4771 6019 4669 4803 
Average 5258.4 5205.6 4270 4361.4 

IE6: :eq(0) :first [0] $([0]) 
trial1 13796 15733 12202 14014 
trial2 14186 13905 12749 11546 
trial3 12249 14281 13421 12109 
trial4 14984 15015 11718 13421 
trial5 16015 13187 11578 10984 
Average 14246 14424.2 12333.6 12414.8 

我剛剛回復第一個本地DOM對象是最快的([0]),但我無法相信jQuery函數中對象的包裝速度更快,因爲它們都是:first:eq(0)

除非我做錯了。

回答

6

好問題,好帖子。我前些時候測試過這個,並且不記得確切的結果。我很高興能夠找到它,因爲這正是我所期待的。

我猜想:first:eq(0)稍微慢點的原因很可能與解析性能有關。省略這些允許jQuery引擎利用本地getElementsByTagNamegetElementsByClassName函數。

i.t.o沒有意外。 DOM元素是訪問速度最快的。使用jQuery在中包裝DOM元素對於循環將不一定對性能產生不利影響,因爲jQuery使用expando屬性進行高速緩存。

然而,就看怎麼用get(0) DOM元素訪問和如何比較有趣的jQuery的包裝中抗eq(0)票價和結果的其餘部分。

5

是的,它們是等效的。

不,他們不可能有顯着差異(其他任何事情都是微觀優化)。

12

據jQuery的源代碼,.first()僅僅是.eq(0)一個便利的包裝:

first: function() { 
    return this.eq(0); 
}, 
+1

這應該是公認的答案。 – 2017-06-03 17:43:32

相關問題