誰もこのjQueryセレクタを打つことができますか？

Question

私は、Asp.Netの親コントロールのIDでプレフィックスされたコントロールの効率的なセレクタを見つけることができるかどうかを調べるためにいくつかのテストを行ってきました。

私はこれを探していましたAspは外部のjavascriptファイルから制御します（私はClientIDを使用するのがうんざりです）。

テストするには、cssclass "speedy"と個々のIDを持つ150個のテキストボックスでページを設定し、次のコードを実行して107番目のテキストボックスを選択してください。

function testclientInput() { 

    var iterations = 100; 
    var totalTime = 0; 

    // Record the starting time, in UTC milliseconds. 
    var start = new Date().getTime(); 

    // Repeat the test the specified number of iterations. 
    for (i = 0; i < iterations; i++) { 
     // Execute the selector. The result does not need 
     // to be used or assigned to determine how long 
     // the selector itself takes to run. 

     // All tests done in ie6, ie7, ie8, ie9beta, firefox3.6, opera11 & chrome8 

     // slowest 
     // $('input.speedy[id$=_TextBox107]'); 

     // Quick but only useful if you know the index. 
     //$($('input.speedy')[106]); 

     //$('[id$=_TextBox107]:first'); 

     //$('input[id$=_TextBox107]'); 

     //$.clientID("TextBox107"); 

     //$('[id$=_TextBox107]'); 

     //$('input[id$=_TextBox107]:first'); 

     //$($('[id$=_TextBox107]')[0]); 

     // Fastest 
     //$($('input[id$=_TextBox107]')[0]); 
    } 

    // Record the ending time, in UTC milliseconds. 
    var end = new Date().getTime(); 

    // Determine how many milliseconds elapsed 
    totalTime = (end - start); 

    // Report the average time taken by one iteration. 
    alert(totalTime/iterations); 

}; 

これは私が思いついた最高のものです。 $($('input[id$=_TextBox107]')[0]);。結果は驚くべきことでした....私は:firstセレクターを使用して私のバージョンにマッチさせることを期待しましたが、それはずっと遅い結果を報告しました。

誰もこれを最適化する方法を考えることができますか？

Answer 1

ブラウザによって異なります。

このバージョン：

$('input[id$=_TextBox107]') 

が...有効querySelectorAllセレクタであるので、それを実装する任意のブラウザが非常に速くなります。

:firstセレクタを使用している場合、有効なCSSセレクタではないものが使用されているため、デフォルトではSizzleのjavascriptベースのセレクタエンジンが使用されています。

パフォーマンスが重要な場合は、jQueryを使用しないでください。ブラウザがquerySelectorAllをサポートしていない場合は、document.getElementsByTagName()を使用して、必要なものをフィルタリングすることができます。

var match; 
if(!document.querySelectorAll) { 
    var inputs = document.getElementsByTagName('input'); 

    for(var i = 0, len = inputs.length; i < len; i++) { 
     if(/_TextBox107/.test(inputs[i].id)) { 
      var match = $(inputs[i]); 
      break; 
     } 
    } 
} else { 
    match = $(document.querySelectorAll('input[id$=_TextBox107]')[0]); 
} 

Answer 2

私は、任意の徹底的なテストを行うdidntのが、私は、多かれ少なかれ早くあなたの「最速」セレクタとしてだったあなたの「最も遅い」セレクタを使用して結果を得ていた...その他のオプションのいくつかは、しかし著しく遅かったです。しかし、私はこれだけだった...

あなたの「最速」というやや遅く行ったが、最悪の選択肢を抜いていなかった

$("[id$='_TextBox107']") 

読む前にIE8 ...好みの

私の方法を使用してテストしました。私はいくつかのテストをしなければならないかもしれないし、私の選択を再考するかもしれない。