我有以下 HTML:
<div class="foo">
<div class="bar">
<div class="target">
</div>
</div>
</div>
哪个选择器效率更高?
$('.foo > .bar > .target')
$('.foo .bar .target')
$('.target')
我是否正确订购了它们?:)
我有以下 HTML:
<div class="foo">
<div class="bar">
<div class="target">
</div>
</div>
</div>
哪个选择器效率更高?
$('.foo > .bar > .target')
$('.foo .bar .target')
$('.target')
我是否正确订购了它们?:)
小心不要被这些类型的问题所困扰——微优化真的会毁掉一个项目。不是时不时思考不好,而是真心的,小心谨慎。
如果您仍然想知道这三个中哪一个更快,您可以通过http://jsperf.com设置一个快速性能测试,并针对该标记对所有三个进行测试。幸运的是,我为您省去了麻烦并自己设置了测试;)http://jsperf.com/css-selector-specificity
结果:
Ops/Sec
----------------------------+---------+--------+------------
$('.foo > .bar > .target'); | 78,379 | ±6.54% | 65% slower
$('.foo .bar .target'); | 78,499 | ±7.72% | 66% slower
$('.target'); | 213,488 | ±0.39% | fastest
如您所见,这三个中最简单的要快得多。您的结果会因浏览器而异。例如,以上来自 Chrome 版本 23。当我在 Internet Explorer 10 中运行此测试时,它甚至更快,每秒执行超过 216,000 次操作。
$("#foo") 是最有效的,但我读过的 $('.foo').find(".target") 是最好的 http://net.tutsplus.com/tutorials/javascript-ajax/14-有用的jQuery技巧笔记和最佳实践/