jquery - jQueryの効率

Question

次のようなクエリがあります。

$('#tabContainer li');

そして、JetBrains WebStorm IDE はそれを非効率なクエリとして強調します。代わりにこれを使用することをお勧めします：

$('#tabContainer').find('li')

どのように説明できますか？そのようなケースを説明するドキュメントはありますか?

Answer 1

この記事では、特定の部分があります (4 番目のポイント)。

をお持ち$('#tabContainer li')の場合は、ドキュメント内のすべてliが照会されます。次に、それらのそれぞれliがチェックされ、親があるかどうかが確認されます#tabContainer。

それをより速く得るために、$('#tabContainer').find('li')使用することができます。li は、ドキュメント内で一意の #tabContainer で検索されます。

しかし、明らかに、ID を使用して選択している場合、パフォーマンスはあまり改善されないはずです (具体性についても言及している SO に関するこの質問の回答から)。

Answer 2

jQuery は前者の式を後者に変換します。したがって、唯一の違いは、jQuery 内の呼び出しオーバーヘッドです。私の意見では、それは無視できます。

しかし:$('#tabContainer').find('li')可読性が向上します (少なくともセレクター構文にあまり慣れていない人にとって)。それを使用する正当な理由だと思います..

Answer 3

最適化の理由は速度だと思います。Find は非常に高速ですが、特定のユース ケースのベンチマークを行っても害はありません。たとえば、これは、実行しようとしているものと同様のいくつかの可能なバリエーションを使用するテストです。

http://jsperf.com/jquery-find-vs-context-sel/9

この場合、find は非常に高速です。ここで、その選択を 1 回だけ実行するとします。その意図を読みやすく/理解しやすい限り、どの方法で行うかは実際には問題ではありません。