jquery - $（'＃id tag'）vs. $（'＃id'）。find（'tag'）-どちらが望ましいですか？

Question

特に速度の観点から、どちらのオプションが優れているか知りたいです。

$('#id tag')...

また

$('#id').find('tag')...

idまた、あなたが変更したりtag、たとえば、classまたはのようなものに変更したりした場合も、同じ答えが当てはまりますinput:checkedか？

たとえば、どちらが良いですか：$('#id input:checked')...または$('#id').find('input:checked');？

score 16 · Accepted Answer

あなたは3つのことに基づいてあなたの決定をすることができます：

読みやすさ

これは、指定された2つのセレクターと大差ありません。$('#id').find('inner')私の側では、構文が実際に何をしているのかをより正確に記述しているので、構文が好きです。

再利用性

コードの他の部分で同じIDセレクター（またはそのコンテキスト内の何か）を使用している場合は、セレクターをキャッシュして再利用できます。私自身、このように書かれたコードをリファクタリングするのは難しいと感じてい$('#id inner')ます。先に進んで改善の可能性を見つける前に、まずcssセレクターをデコードする必要があるからです。

それほど複雑ではないこれらの2つのケースを想像してみてください

$('#hello .class_name tag').doThis();
$('#hello .other_name input').doThat();

そして他の場合

$('#hello').find('.class_name tag').doThis();
$('#hello').find('.other_name input').doThat();

2番目の例は「IDセレクターをキャッシュする」と悲鳴を上げると思いますが、最初の例はそうではありません。

スピード

パフォーマンスは常に良い点です。この場合、idセレクターは、find最初にコンテキストを確立し、要素のより小さなサブセットに降順セレクターを適用できるため、ほとんどのブラウザーでより適切に機能します。

jQueryでのコンテキストとサブセットセレクターのパフォーマンスについて詳しく知りたい場合は、これが優れたパフォーマンステストです。IDのサブセットが一般的に支配します。もちろん、さまざまな結果を得ることができますが、ほとんどの場合、そうなります。

したがって、私の観点からは、サブセットセレクターの場合は3から0です。

score 6 · Accepted Answer

spanこれが、 elementの下にあるすべての要素を検索するテストケースHTMLです#i。

<div id="i">
  <span>testL1_1</span>
  <span>testL1_2</span>
  <div>
    <span>testL2_1</span>
  </div>
  <ul>
    <li>
      <span>testL3_1</span>
    </li>
  </ul>
  <div>
    <div>
      <div>
        <div>
          <span>testL5_1</span>
        </div>
      </div>
    </div>
  </div>
</div>

これらの3つのjQueryセレクターのテスト：

$("#i span");         // much slower
$("#i").find("span"); // FASTEST
$("span", "#i");      // second fastest

http://jsperf.com/jquery-sub-element-selection

私はそれをGoogleChromeとFirefoxで実行しました.find()が、3番目のケースが最も速く、最初のケースがはるかに遅いようです。

jQueryセレクターのパフォーマンス

score 2 · Accepted Answer

ここでのパフォーマンス測定：:)==> http://jsperf.com/find-vs-descendant-selector

descendant方法はlil速いようですが、オペラではパフォーマンスが良くありません。

私の意見では、それは問題ではありません:)

これがあなたの質問に答えて、ここを参照してください。.find（）は、基本的な子孫選択メソッドよりも高速ですか？

score 2 · Accepted Answer

最近のブラウザでは、最初のブラウザは2番目のブラウザ（）$("#id tag")よりもはるかに遅いように見えます。ここでテストします。下のスクリーンショットを参照してください。IE7（欠けている）はそれらをほぼ同じ速度で実行します。$("#id").find("tag")querySelectorAll

しかし、2つの観察：