jQuery性能 - 类选择器

时间:2012-12-26 21:05:05

标签: jquery jquery-selectors

我有以下HTML:

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

哪个选择器效率更高?

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

我订的是否正确? :)

2 个答案:

答案 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/