我已阅读如何最佳调整 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 进行的额外测试。
最佳答案
不要相信没有基准证明的任何人。
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 ,这会添加另一个测试用例。
关于javascript - jQuery 查找方法和标签名称的特殊性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27530871/