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设置快速性能测试，并让他们全部三分之二的标记。幸运的是，我为您节省了麻烦并自己设置了测试;）

结果：

                              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'）。查找（"。目标"）我读过是最好的http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-jquery-tricks-notes-notes-and-best-practices/