2009-08-05 10 views
16

セレクタに:first:eq(0)のどちらを使用するかわかりません。私は彼らがいつも同じオブジェクトを返すだろうと確信していますが、他のものより速いですか?jQueryの:firstと:eq(0)セレクタは機能的に同等ですか?

私は誰かがここで前にこれらのセレクタをベンチマークしている必要があり、1つが高速である場合、私はテストする最良の方法は本当にわからないと確信しています。

アップデート:ここで私は走ったベンチがあります:

/* 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のは、キャッシングのためにはExpandoプロパティを使用するようためのループでjQueryを使ってDOM要素をラップすると、必然的にパフォーマンスに悪影響を及ぼすことはありません。

しかし、get(0)とDOM要素のアクセスがどのように比較され、どのようにjQueryのラッピングがeq(0)と残りの結果と比較されるのが面白いでしょう。

5

はいこれは同等です。

ない

んが、彼らは(何かがマイクロ最適化で)大幅に異なる可能性がありません。

12

jQueryのソースコードによると、.first().eq(0)のためだけの便利なラッパーです:

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

これが受け入れ答えなければなりません。 –

関連する問題