1

製品の大きなテーブルリストがあります。これは動的で、ajax で変化します。そのテーブルには約 100 行の があります。

要素を選択するコンテキスト メソッドは、通常のor$('.className', '#parentElement');よりもはるかに優れたパフォーマンスを発揮することを既に確認しました。（間違っていたら訂正してください）$('.className');$('#parentElement .className');

状況によっては、jQuery を使用して特定の要素を選択する必要があります。新しい行ごとに一意id="product-name-123456"の要素が動的に追加されます。class="mainproductOffer"

では、これら 2 つの方法のどちらがより高速に実行されるでしょうか?

  1. $('tr[id^=product-name-]').click(function(){...});

  2. $('tr.mainproductOffer').click(function(){...});

また

同じことをより速く行う他の方法はありますか？

4

4 に答える 4

1

では、これら 2 つの方法のどちらがより高速に実行されるでしょうか?

$('tr.mainproductOffer').click(関数(){...});

同じことをより速く行う他の方法はありますか？

比類のない記事「jQuery Anti-Patterns for Performance」が役立ちます

于 2012-12-27T09:57:54.140 に答える
0 
$('tr.mainproductOffer').click(function(){.....; OR
$('table').on( 'click', 'tr.mainproductOffer', function(){...;

以来、より高速です

jqueryのドキュメントによると

jQuery は、フォーム tag#id.class の単純なセレクターをデリゲートされたイベントのフィルタリングに使用すると、非常に迅速に処理できます。したがって、「#myForm」、「a.external」、および「button」はすべて高速セレクターです。より複雑なセレクター (特に階層的なセレクター) を使用する委任イベントは、数倍遅くなる可能性がありますが、ほとんどのアプリケーションでは十分に高速です。ドキュメント内のより適切なポイントにハンドラーを接続するだけで、多くの場合、階層セレクターを回避できます。たとえば、$("body").on("click", "#commentForm .addNew", addComment)の代わりに$("#commentForm").on("click", ".addNew", addComment) を使用します。

于 2012-12-27T10:04:41.537 に答える