javascript - 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') 更快一点。可能 find('div.my-class') 执行一个小的额外任务。本题的要点是在处理find方法和特异性时获得良好的实践导向。我会让这个问题保持一段时间，看看是否有人知道我们使用 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 ，这会添加另一个测试用例。