3

ページにたくさんのチェックボックスがあり、一度にそれらのチェックボックスのサブセットのみを表示します。

次に、すべてのチェックボックスをループしてチェックされているかどうかを確認するアクションを実行します。

例えば

$(".delete_items").click( function() {
     $('.checkboxes' ).each(function(){
     //do stuff
     }
}

次に、ユーザーは非表示のチェックボックスを操作できないため、チェックボックスに :visible を追加するとループが高速化されると考えていました

例えば

$(".delete_items").click( function() {
     $('.checkboxes :visible' ).each(function(){
     //do stuff
     }
}

しかし、 :visible を追加するとオーバーヘッドが増えるかどうかはわかりません。何かご意見は？

4

3 に答える 3

9

:visible要素が表示されているかどうかにかかわらず、jQuery はいくつかのプロパティをチェックする必要があるため、オーバーヘッドが確実に追加されます。

要素は、いくつかの理由で非表示と見なされます。

  • これらの CSS 表示値は none です。
  • それらは type="hidden" のフォーム要素です。
  • それらの幅と高さは明示的に 0 に設定されています。
  • 先祖要素は隠されているため、要素はページに表示されません。

ソース — :hidden セレクター | jQuery API ドキュメント

特に最後のポイントは、オーバーヘッドを追加するすべての要素に対して DOM をトラバースすることを暗示しているようです。

クラスをセレクターとして使用するだけの場合、jQuery はgetElementsByClassや などのブラウザー関数を利用できquerySelectorAllます。

反対に、これらのチェックボックスで計算の複雑なアクションを実行すると、ループするチェックボックスの数が少なくなり、以前のルックアップよりも重要になる場合があります。

必ず自分でベンチマークする必要があります。

アップデート：

表示されているチェックボックスに別のクラスを割り当てて、それらを選択する別のアイデア

$('.checkboxes.otherClass')

を使用するよりも確実に高速になるはず:visibleです。

更新 2:

jsPerf を作成しました: http://jsperf.com/jquery-visible-test

これは最良のテストケースではないかもしれませんが、少なくとも私 (Chrome 8、Mac OS X 10.6) にとっては、使用:visibleは ~45% 遅くなります (Firefox 3.6.13 ではさらに悪化: ~75% 遅くなります)。

更新 3:

2 つのクラスを使用するとさらに高速になるようです。テスト ケースを更新しました。

于 2011-01-14T22:50:02.920 に答える
1

目に見えないチェックボックスが重要かどうかはよくわかりません。それらを含めても構わない場合はquerySelectorAll、Felix King が示唆しているように、クラス セレクターを使用して面倒な作業を任せてください。

一方、表示されているチェックボックスでのみ作業することを気にする場合は、それらがチェックされているかどうかを判断できます。チェックされていない可視性要素をチェックする必要がないため、これは大幅に高速になります。少しごまかして、内部 jQuery 関数を使用することもできますjQuery.expr.filters.visible。これは、より迅速に呼び出す方法です$(this).is(':visible')。

$('.checkboxes' ).each(function(){
    if (this.checked && jQuery.expr.filters.visible(this)) {
        // checkbox is visible and checked
    }
}

これはjQuery 1.4.4で機能しますが、文書化されておらず、いつでも変更される可能性があることに注意してください...

他のユーザーが言及しているように、重大なパフォーマンスの問題が発生していない限り、過度に最適化しないでください。もしそうなら、この解決策は役に立つかもしれません。

編集少しのベンチマークは、チェックされた表示可能なチェックボックスでのみ機能する必要が$('.checkboxes:visible')ある場合、関連するクラスが適用されていないと仮定して、私のソリューションは の約2倍の速度であることを示唆しています。

于 2011-01-14T23:03:51.503 に答える
1

さて、あなたは追加したいでしょう

$('.checkboxes:visible')

（スペースがないことに注意してください）表示されているチェックボックスのみに関心があり、チェックボックスの子孫である表示されているアイテムは気にしていないためです。それを修正したら、いいえ...目に見えるセレクターを追加しても、顕著なオーバーヘッドは追加されません。

そうは言っても、ページに多くのチェックボックスがない限り、マイクロ最適化していると思います。パフォーマンスの低下に本当に気付いていない限り、表示または非表示を気にする必要はありません (この時点では状態の一貫性と予測可能性を維持する方がよいと思います)。コードが適切に機能するようにしてください。

于 2011-01-14T22:50:36.227 に答える