web-dev-qa-db-ja.com

$（）。each vs $ .each vs for jQueryのループ？

なぜ起こっているのか理解できません。

私は ここ を読んだ：

最初の$。eachは、反復子を開始するためのsingle関数呼び出しを構成します。

2番目の$（foo.vals）.eachは、three関数呼び出しを行いますイテレータを開始します。

  • 1つ目は、新しいjQueryラッパーセットを生成する$（）です（このプロセス中に他の関数呼び出しがいくつ行われたかはわかりません）。
  • 次に、$（）。eachの呼び出し。
  • そして最後に、jQuery.eachの内部呼び出しを行い、イテレーターを開始します。

あなたの例では、控えめに言っても違いはごくわずかです。ただし、ネストされた使用シナリオでは、パフォーマンスが問題になる場合があります。

最後に、jQuery EnlightenmentのCody Lindleyは、関数呼び出しが関係しているため、1000回を超える反復に$ .eachを使用することを推奨していません。通常のfor（var i = 0 ...ループを使用します。

それで、このjsperfでテストしました。

（タスク：内部のチェックボックスをチェックしたTrを見つけ、そのtrに色を付ける）

これはjsbin

しかし、jsperfを見てください

すべての期待に対して、oppositeは真です。 （chromeおよびFFとIE）

enter image description here

$().each（3つのメソッドを呼び出すものが最も高速です。など）.

ここで何が起こっていますか？

javascriptjqueryeach
38
Royi Namir

テストは非常に重いため、3つのループオプションの実際の違いを実際に判断することはできません。

ループをテストする場合は、テストから関係のない作業を可能な限り削除するために最善を尽くす必要があります。

現状では、テストには次のものが含まれています。

  • DOM選択
  • DOMトラバーサル
  • 要素変異

これらはすべて、ループ自体と比較して非常に高価な操作です。余分なものを削除すると、ループの違いがよりはっきりとわかります。

http://jsperf.com/asdasda223/4

FirefoxとChromeの両方で、forループは他のループよりも100倍以上高速です。

enter image description here

37
the system

上手

  • $.each()は実行中のjQuery関数であり、リストの反復に使用されるため、オーバーヘッドはjQuery関数と、リスト内のすべてのアイテムに対してその関数を呼び出すオーバーヘッドである必要があります。この場合
  • $(thing).each()この背後にある考え方は、$(thing)がjQueryインスタンスを作成し、このインスタンスを反復処理することです（_.each_はそのインスタンスに作用します）。あなたの場合、それを呼び出したインスタンスはすでにjQueryオブジェクトであるため、オーバーヘッドは最小限です（あなたはインスタンスですか、そうですか）。
  • for()この場合、各反復でリストの長さを調べることを除いて、オーバーヘッドはまったくありません。

行うことを検討してください：

_var l = g.length;
for (var i=0;i<l;i++) {
    // code;
}
_

HTMLに応じて、ほとんどの場合、Sizzle Jqueryパーサーがドキュメント内のセレクターを見つけることができます。

また、最近変更されたjQueryセレクターが右から左に評価されない限り、セレクターが最良であるとは思わないことに注意してください。最初の下にあるすべての.find() idによって参照されるタグは、ドキュメントのサブセットのみを検索するためです。

3
Forbesmyester

「タスク」への異なるアプローチ http://jsfiddle.net/ADMnj/17/

しかし、私はパフォーマンスの問題は、セレクターを正しい状態にしないでくださいから来ていると思います

#t tr input:checkbox:checked 

VS

#t tr :checkbox:checked

チェックボックスがチェックされているかどうかを確認する正しい方法は、このように呼び出すことです

#t tr input[checked="checked"]

W3.ORGのセレクタリストはE [foo]を参照

そして最後になりましたが、最速はコードが最も短いものでもあり、3行と4行と5行のコードから得られるわずかなパフォーマンスの違いがありますが、この事実を証明することはできません。

0
Simon Dragsbæk