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

$（ “＃富”）是最有效的 但 $（ '富'）。找到（ “目标”） 我已阅读是最好的http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/