2011-01-06 10 views
4

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

私はこれを探していました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セレクターを使用して私のバージョンにマッチさせることを期待しましたが、それはずっと遅い結果を報告しました。

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

+0

申し訳ありませんが、なぜ 'document.getElementById( '_ TextBox107')'を使用できませんか? IDは一意でなければなりません – Harmen

+0

@Harmen:彼は*セレクターで終わる*属性を使用しているので、 '_TextBox107'はIDの最後の部分です。 – user113716

+0

@Harmen:ASPコントロールには親IDが前置されているためです。私は私の質問でこれを述べます。 –

答えて

4

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

このバージョン:

$('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]); 
} 
+1

@Patrick hmmmm ....これは面白そうです。私はいくつかのテストを実行します。乾杯! –

+0

@James:Awesome。それを聞いてうれしい助けた。:0) – user113716

+1

...また、私は正規表現の小さな改善は、 '$'を末尾に追加することであると付け加えたい。if(/ _TextBox107 $ /。test(inputs [i] .id)) ' 、または正規表現をまったく使用しないで、代わりに 'indexOf()'を使用してください。 'if(inputs [i] .id.indexOf( '_ TextBox107')!= -1)'。これは少し良くなるかもしれません、そして、私はあなたがその特定の文字列で何らかの偽陽性を得るのではないかと疑います。 – user113716

0

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

あなたの「最速」というやや遅く行ったが、最悪の選択肢を抜いていなかった
$("[id$='_TextBox107']") 

読む前にIE8 ...好みの

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

+0

@ Stephen:実際にはブラウザに依存します。 ie6と7はクラスを扱うときかなり遅いです。 –

関連する問題