jQuery性能 - 类选择器

Question

我有以下HTML:

<div class="foo">
    <div class="bar">
        <div class="target">
        </div>
    </div>
</div>

哪个选择器效率更高？

• $('.foo > .bar > .target')
• $('.foo .bar .target')
• $('.target')

我订的是正确的吗？:)

Answer 1

小心不要陷入这些类型的问题 - 微优化可能真的毁了一个项目.并不是说不时思考是不好的,但要真诚,要谨慎.

如果你仍然想知道这三个中的哪一个更快,你可以通过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次.