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

Question

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

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

我可以选择foo为$('ul li.foo')，$('li.foo')或$('.foo')。

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

Answer 1

简单类选择器.foo在现代浏览器中速度最快，因为它可以使用可用的原生getElementsByClassName。

这是benchmark，显示了这一点：

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

<强>更新

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

Answer 2

.foo是现代浏览器中最快的选择器。其他选择器将选择.foo，然后筛选出不是li的任何内容，然后（对于$('ul li.doo')）迭代通过树，并确保有ul某处。

但是.foo在没有getElementsByClassName和querySelectorAll的旧版浏览器中速度最快。比如IE 6。

如果你知道你在页面上只有一个$('#foo')，那么最快就是使用一个id并执行foo。

Here is a benchmark