我有以下HTML:
<div class="foo">
<div class="bar">
<div class="target">
</div>
</div>
</div>
哪个选择器效率更高?
$('.foo > .bar > .target')
$('.foo .bar .target')
$('.target')
我订的是否正确? :)
答案 0 :(得分:8)
小心不要陷入这些类型的问题 - 微优化可能真的毁了一个项目。并不是说不时思考是不好的,但要真心,要小心。
如果你仍然想知道这三者中的哪一个更快,你可以通过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次。
答案 1 :(得分:1)
$(“#foo”)效率最高 但 $( '富')。找到( “目标”) 我读过的是最好的http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/