jQuery使用标记名称查找方法和特异性

Question

我已经阅读了如何最好地调整jQuery selectors。我只是怀疑我没有在SO上找到参考。

鉴于div.my-class和.my-class在DOM中表示相同的东西（即所有带.my-class的标签都是div），通常会更快：

$('#my-id').find('div.my-class')...

或

$('#my-id').find('.my-class')...

关于潜在原因的简短解释会很棒。性能影响是否显着？ jQuery网站上的示例显示.find('div.my-class')，但这可能就是一个例子。

编辑：运行jsPerf似乎是$（'＃my-id'）。find（'。my-class'）有点快。可能发现（'div.my-class'）执行一项额外的小任务。这个问题的关键是在处理查找方法和特异性时获得良好的实践指导。我会暂时保持这种状态，看看是否有人对jsPerf的结果有根本原因。感谢@dnozay的额外测试。

Answer 1

不要相信任何没有基准的人来证明这一点。

http://jsperf.com/jquery-find-method-and-specificity-with-tag-name

使用此准备代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="container">
  <div id="my-id">
    <div class="my-class"></div>
    <div class="foobar"></div>
    <div class="my-class"></div>
    <span class="my-class"></span><!-- should not be matched? -->
  </div>
</div>

第一个测试用例：

$('#my-id').find('div.my-class');

在浏览器上的速度比以下慢3倍：

$('#my-id').find('.my-class');

然而他们不会返回相同的元素。 所以这取决于你的html是什么样的。

深入研究。

此查询尝试一次检查所有方面：

$('#my-id div.my-class')

此查询通过匹配id：

来提前删除元素

$('#my-id').find('div.my-class')

此查询更进一步，首先匹配类，然后匹配标记。

$('#my-id').find('.my-class').filter('div');

更多数字

如果您看过http://jsperf.com/275308711/，请检查http://jsperf.com/275308711/2，这会添加另一个测试用例。

Answer 2

首先，摆脱发现。它不需要并导致jQuery执行两个选择器而不是一个。执行一个选择器几乎总是会更快，因为它是由浏览器执行而不是由jQuery执行。而是像这样写你的选择器：

$('#div1 .myclass');

作为一般规则，当你遇到这样的问题时，最好的办法是对其进行分析。 jsperf.com是一个有用的工具。您的搜索结果可能因浏览器而异。

我已经创建了一个基本测试，通过最具体的选择器显示Chrome中的性能稍快一点：

http://jsperf.com/275308711