$（'＃id tag'）与$（'＃id'）。find（'tag'） - 哪个更好？

Question

我想知道哪个选项更好，特别是在速度方面：

$('#id tag')...

或

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

此外，如果您将id和/或tag更改为class或类似input:checked之类的内容，相同的答案会适用吗？

例如，哪个更好：$('#id input:checked')...或$('#id').find('input:checked');？

Answer 1

您可以根据以下三点做出决定：

<强>可读性

这与你的两个选择器没什么区别。就我而言，我更喜欢$('#id').find('inner')语法，因为它更准确地描述了它实际上在做什么。

<强>可重用性

如果您的代码的其他部分使用相同的id选择器（或其上下文中的某些内容），则可以缓存选择器并重用它。我自己发现重构像$('#id inner')这样编写的代码更难，因为你必须首先解码css选择器才能继续前进并找到可能的改进。

想象一下，这两个案例的复杂程度并不高

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

另一种情况

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

我认为第二个例子对你尖叫«缓存id选择器»，而第一个没有。

<强>速度

性能总是一个好点，在这种情况下，带有find的id选择器在大多数浏览器中都能做得更好，因为它首先建立了上下文，并且可以将降序选择器应用于较小的子集元件。

Here's a good performance test, if you want to know more about context-vs subset selectors performance in jQuery。 ids的子集通常规则。当然，你可以获得不同的结果，但在大多数情况下，他们会这样做。

因此，从我的观点来看，子集选择器为3到0。

Answer 2

以下是测试用例HTML，其中我查找span元素下的所有#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>

测试这三个jQuery选择器：

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

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

我在Google Chrome和Firefox上运行它，似乎.find()紧随其后的是第三种情况，第一种情况要慢得多。

Answer 3

此处的效果指标：:) ==＆gt; http://jsperf.com/find-vs-descendant-selector

似乎descendant方式更快，但在歌剧中表现不佳，

anyhoo在我看来无所谓:)

希望这能回答您的问题并在此处Is .find() faster than basic descendant selecting method?

Answer 4

在现代浏览器中，第一个$("#id tag") 比第二个（$("#id").find("tag")）慢; test here，请参见下方的截图。 IE7（缺少querySelectorAll）以大致相同的速度运行它们。

但有两点意见：

1. 真的不太重要。如果您没有调试实际的已知性能问题，请不要担心。

2. 综合基准测试总是令人怀疑。如果您正在解决实际的已知性能问题，请 （您的实际选择器和实际标记）。

Answer 5

后代表现更好。检查此链接Jsperf 。

1. 如果您有太多嵌套元素。然后去找。这真的是一个小小的差异。
2. 这只是你方便的编码方式。我更喜欢如果有太多嵌套物品，那么我会去寻找，

Answer 6

正如我所说 - 它在浏览器中有所不同。

chrome：

http://i.stack.imgur.com/SijQY.jpg

即

http://i.stack.imgur.com/axhGw.jpg