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

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.

Answer 2

.foo是现代浏览器中最快的选择器。其他选择器将 select .foo，然后过滤掉任何不是lithen (for $('ul li.doo')) 遍历树并确保有ul某个地方的东西。

但是，在没有getElementsByClassName和querySelectorAll.foo的旧浏览器中不会是最快的。比如IE 6。

从长远来看，最快的方法是使用 id，$('#foo')如果您知道页面上只有一个，则可以这样做foo。

这是一个基准