选择一组元素的最有效方法

Question

例如,如果我有一个无序列表,可以说,

<ul>
    <li class="foo">Foo</li>
    <li class="bar">Bar</li>
</ul>

我可以选择foo作为$('ul li.foo'),$('li.foo')或$('.foo').

那么哪种方式更有效(如果有的话)以及为什么.或者是在选择子项时指定父母只是出于删除任何冲突的唯一原因,以防有其他元素具有相同的类名!

Answer 1

简单的类选择器.foo在现代浏览器中将是最快的,因为它可以使用getElementsByClassName可用的本机.

这是一个准确显示的基准:

您可以在对您而言重要的所有浏览器中运行该性能测试,并根据结果做出决策.或者只使用最适合您情况的选择器,因为在现实世界中,它不会产生任何明显的差异.

更新

现在我们可以从更广泛的浏览器中看到性能结果,您可以看到新旧之间的区别(缺少getElementsByClassNameIE7和8).但是,如今您可能会从新版浏览器获得更多流量,但我不了解您的网站,因此我之前提到过,您只需要选择适合您的网站.如果由于某种原因90%的流量来自IE7,您应该使用li.foo.