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

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

例えば：

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

同じ結果が得られます：

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

さて、どのオプションが最速または優先されますか、そしてその理由は？

children()ノードの直接の子を見てのみ、一方でfind()ノードの下横断全体DOM、そうchildren() すべきであるより速く与えられたと同等の実装可能。しかし、find()使用してネイティブながら、ブラウザのメソッドをchildren()使用のJavaScriptがブラウザで解釈。私の実験では、一般的なケースではパフォーマンスに大きな違いはありません。

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

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

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

children（）は、ネストのレベルが100を超え、find（）がトラバースする約4,000以上のdivがある場合、find（）よりも優れたパフォーマンスを示します。これは初歩的なテストケースですが、ほとんどの場合、find（）はchildren（）よりも速いと私は思います。

ChromeデベロッパーツールでjQueryコードをステップ実行したところ、children（）が内部でsibling（）、filter（）を呼び出し、find（）が実行するよりもいくつかの正規表現を使用していることに気付きました。

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

実行できるパフォーマンステストがあるリンクを次に示します。find()実際にはの約2倍高速ですchildren()。

それらは必ずしも同じ結果が得られません。find()あなたに取得する子孫ノードを、一方children()だけあなたを取得します直接の子を一致していること。

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

他の回答のいずれも使用した場合について述べていない.children()か、.find(">")するだけで、親要素の直下の子を検索します。それで、私は子供を区別する3つの異なる方法を使用して、を見つけるためのjsPerfテストを作成しました。

偶然にも、余分な「>」セレクタを用いた場合であっても、.find()まだたくさんより速いです.children()。私のシステムでは10倍です。

ですから、私の見方では、のフィルタリングメカニズムを使用する理由はまったくないよう.children()です。

find()とchildren()メソッドの両方を使用して、一致する要素の子をフィルタリングします。ただし、前者は任意のレベルの下位に移動し、後者は単一のレベルの下位に移動します。

簡略化するには：

1. find() –一致した要素の子、孫、ひ孫の検索...すべてのレベルまで
2. children() –一致した要素の子のみを検索します（1レベル下）。