jqueryのパフォーマンスが表示されます

Question

私はページに多数のチェックボックスを持っていますが、私は一度にこれらのチェックボックスのサブセットのみを表示します。

私は、チェックボックスのすべてをループし、彼らがチェックされているかどうか見て何らかのアクションを実行：

例えばを目に見えるのチェックボックスにループ

例えばをスピードアップするでしょう：

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

それから私は、ユーザーが追加することを、隠されたチェックボックスと対話することはできませんので、よく、考えていました

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

しかし、私はわかりませんが：visibleを追加するとオーバーヘッドが増えますか？何かご意見は？ jQueryの要素が見えるかどうか、いくつかのプロパティをチェックする必要があるため、

Answer 1

:visibleは、必ず多くのオーバーヘッドを追加します。

要素はいくつかの理由のために隠されたと考えることができます。

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

ソース - :hidden Selector | jQuery API Documentation

特に最後の点は、オーバーヘッドが追加されますすべての要素のためのDOMをトラバース暗示するようです。

クラスをセレクタとして使用すると、jQueryはgetElementsByClassまたはquerySelectorAllなどのブラウザ機能を使用できます。

一方、これらのチェックボックスで計算複雑なアクションを実行すると、それらのチェックボックスのうちのいくつかをループすると、前のルックアップを上回る可能性があります。

あなたは間違いなくそれを自分でベンチマークする必要があります。

更新：

もう一つのアイデアを可視チェックボックスに別のクラスを割り当てると、間違いなく:visibleを使用するよりも速くする必要があります

$('.checkboxes.otherClass') 

でそれらを選択します。

アップデート2：

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

それは最高のテストケースであってもよいが、少なくとも私にとっては（クローム8、マックOS X 10.6）、:visibleをされて使用していない可能性があります〜45％遅く（Firefox 3.6ではさらに悪い。13：〜75％遅い）。

アップデート3：

は、2つのクラスを使用するには、より速く、私はテストケースを更新しているようです。

Answer 2

あなただけ見えないチェックボックスやチェックボックスの子孫である、目に見えるアイテムを懸念しているので、まあ、あなたが（スペース不足に気付く）

$('.checkboxes:visible') 

を追加したいと思います。いったんそれを修正すると、いいえ...可視セレクタを追加すると、目に見えるオーバーヘッドが追加されません。

あなたのページに多くのチェックボックスがない限り、あなたはマイクロ最適化していると思います。パフォーマンスヒットに本当に気づいていない限り、目に見えるかどうかを心配する必要はありません（現時点では、状態を一貫性と予測可能に保つ方が良いと思います）。

Answer 3

私は、目に見えないチェックボックスが重要かどうかは確信していません。あなたがそれらを含める気にしない場合は、クラスセレクタを使用してquerySelectorAllフェリックスキングが示唆しているように、重い持ち上げをさせてください。

一方、表示されているチェックボックスのみで作業するのであれば、チェックされていればその可視性を判断できます。これは、チェックされていない可視性要素をチェックする必要がないので、大幅に高速になります。また、ビットをカンニングして$(this).is(':visible')を呼び出すより迅速な方法である内部jQueryの機能jQuery.expr.filters.visible、使用することができます。

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

注これはjQueryの1.4.4で動作しながら、それが文書化されておらず、変更される可能性があり、任意の時点で...

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

編集少しbenchmarkingは、あなたの要件が確認され、目に見えるチェックボックスにのみ動作するようにする必要があり、ことを示唆している、私の解決策は、あなたが適用され、関連するクラスを持っていない仮定、約2倍の速$('.checkboxes:visible')としてあります。