web-dev-qa-db-ja.com

jQueryで最速のchildren（）やfind（）とは何ですか？

JQueryで子ノードを選択するには、children（）だけでなくfind（）も使用できます。

例えば：

$(this).children('.foo');

次と同じ結果になります。

$(this).find('.foo');

さて、どのオプションが最速か優先か、そしてそれはなぜですか？

jqueryjquery-selectors
309
bart

children() はノードの直下の子だけを調べますが、 find() はノードの下のDOM全体を走査するため、同等の実装ではchildren()shouldの方が速くなります。 。ただし、find()はnativeブラウザメソッドを使用し、children()はJavaScriptブラウザで解釈されます。私の実験では、典型的なケースではパフォーマンスに大きな違いはありません。

どちらを使用するかは、DOMの直接の子孫か、それより下のすべてのノードだけを考慮するかによって異なります。つまり、メソッドの速度ではなく、希望する結果に基づいて適切なメソッドを選択します。パフォーマンスが本当に問題になる場合は、最良の解決策を見つけてそれを使用するように試してください（または、ここで他の回答のベンチマークを参照してください）。

402
tvanfosson

この jsPerf test はfind（）が速いことを示唆しています。私は より徹底的なテスト を作成しましたが、それでもfind（）がchildren（）よりも優れているように見えます。

更新：tvanfossonのコメントに従って、私は 別のテストケース を16レベルのネストで作成しました。すべての可能なdivを見つけるときにfind（）が遅くなるだけですが、find（）はまだdiv（の最初のレベルを選択するときにchildren（）よりも優れています。

トラバースするためのfind（）のための100以上のレベルのネストとおよそ4000+ divがあるとき、children（）はfind（）より性能が上がり始めます。これは初歩的なテストケースですが、ほとんどの場合、find（）はchildren（）より速いと思います。

私はChrome Developer ToolsのjQueryコードをステップスルーし、children（）が内部でsibling（）、filter（）を呼び出し、find（）よりもいくつかの正規表現を通過することに気付きました。

find（）とchildren（）は異なるニーズを満たしますが、find（）とchildren（）が同じ結果を出力する場合は、find（）を使用することをお勧めします。

176
JR.

これが リンク です。これはあなたが実行できるパフォーマンステストを持ちます。 find()は実際にはchildren()の約2倍速いです。

Chrome on OSX10.7.6

91
mactive

find()はあなたにしか与えられない子孫ノードだが、children()はあなたにしか得られない直接の子供たちそのマッチを与える。

ある時点で、find()は、直接の子だけではなく、一致する可能性があるすべての子孫ノードを検索する必要があったため、かなり遅くなりました。しかし、これはもはや真実ではありません。 find()は、ネイティブのブラウザメソッドを使用しているため、はるかに高速です。

24
John Feminella

.children()または.find(">")を使用してのみで親要素の直接の子を検索する場合を扱ったケースは、他の答えでは処理されていません。そこで、私は jsPerfテストでテストする を作成し、3つの異なる方法で子供を区別しました。

それが起こるので、たとえ余分な ">"セレクタを使ったとしても、.find()はまだ.children()よりも多く速いです。私のシステムでは、10倍です。

ですから、私の見解では、.children()のフィルタリングメカニズムを使う理由はそれほど多くないようです。

14
Craig Walker

find()メソッドとchildren()メソッドの両方がマッチした要素の子をフィルタするために使用されます、前者が任意のレベルを下に移動し、後者がシングルレベルを移動することを除いて。

簡単にするには：

  1. find() - 一致した要素の子、孫、孫を検索します。すべてのレベルを下に移動します。
  2. children() - 一致した要素の子のみを検索します（単一レベル下）。
3
Naresh Kumar