jquery - 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 次操作。

Answer 2

$("#foo") 是最有效的，但我读过的 $('.foo').find(".target") 是最好的 http://net.tutsplus.com/tutorials/javascript-ajax/14-有用的jQuery技巧笔记和最佳实践/