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

Question

举个例子，如果我有一个无序列表，比如说：

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

我可以选择将foo作为 $（'ul li.foo'）， $（'li.foo'）或 $（'。foo'）。

那么哪种方式更有效（如果有的话），为什么呢？或者是指定父级选择子元素只是为了消除任何冲突，以防其他元素具有相同的类名！

- srijan

---

根据所涉及的操作系统/浏览器/版本以及jQuery版本，情况可能不同。你关心哪个版本？此外，这看起来像是最佳的过早优化。 - Phrogz

最好使用ID选择元素，在您的情况下，您可以为UL添加ID。否则，存在具有相同类和层次结构的多个元素的可能性。 - Riz

@Phrogz 这只是出于好奇。另外你提到它取决于操作系统/浏览器/版本。你能再详细解释一下吗？ - srijan

@srijan 一些旧版浏览器不支持 getElementsByClassName，因此本地查找的好处将会丢失；但是如果这些浏览器有 getElementsByTagName，那么首先按标签选择，然后再按类别缩小范围可能比选择所有元素然后缩小范围更快（未经测试）。例如：请参见性能测试页面中的 IE7和IE8结果。 - Phrogz

Answer 1

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

以下是一个显示这一点的基准测试：

您可以在所有重要的浏览器中运行该性能测试，并根据结果做出决定。或者只需使用对您的情况最有效的选择器，在实际世界中，它不会产生任何明显的差异。 更新 现在我们可以看到更广泛的浏览器性能结果，你可以看到旧版与新版之间的差别（IE7和8中缺少 getElementsByClassName ）。但是，如今您很可能会从新的浏览器中获得更多的流量，但我不知道您的网站，因此如先前所述，您只需要选择适合您的内容。如果由于某种原因您90%的流量来自IE7，则应该使用li.foo。

- James Allardice

---

这太棒了。凭直觉，我也认为跟踪元素的开销会更少。感谢您的详细说明。那真的很有帮助。 - srijan

@srijan - 没问题，很高兴能帮助到你 :) http://jsperf.com 是一个非常好的工具，无论何时你有关于各种JavaScript片段性能的问题。 - James Allardice

Answer 2

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

然而，在没有 getElementsByClassName 和 querySelectorAll 的旧浏览器中（如IE6），.foo 将不会是最快的。

如果您知道页面上只有一个 foo，最快的方法是使用 ID 并执行 $('#foo')。

这里有一个基准测试。

- Paul