“$("s1").find("s2").find("s3")”和“$("s1 s2 s3")”哪个更快？（涉及IT技术）

Question

当涉及到选择特定的DOM元素时，jQuery具有相当多方面的功能。今天我注意到，获取相同元素的两种方式可能会产生不同的速度：

$("selector1").find("selector2").find("selector3")

并且

$("selector1 selector2 selector3")

(其中 selectorX 可以是ID、class或其他任何东西)

两者都会产生相同的元素集，但它们之间是否存在速度差异？jQuery实际上如何遍历DOM？这在第二种情况下尤其重要：它是从选择器1到选择器3还是反过来？

有人测量过两者之间的差异吗？

- Robert Koritnik

Answer 1

在Chrome浏览器中，使用单个$('...')比链接$.find()快大约两倍。这个JSPerf Benchmark会给你一个好的想法，一旦有更多人测试它，也会适用于其他浏览器。

- Jim Mitchener

---

感谢您提供可在不同浏览器上运行并观察结果的可运行测试。 - Robert Koritnik

我的FF4测试表明使用find().比复合选择器慢了21%。 - Robert Koritnik

是的，到目前为止看起来最大的区别在Chrome/IE中。 - Jim Mitchener

测试已更新以支持类。看起来在IE中，类实际上比ID更快。 - Jim Mitchener

在FF4中，使用类进行find比其他任何方法都要快得多。对于ID，最好使用复合选择器。在我的IE8中，使用复合选择器与类和ID相似，并且比使用find快得多。使用复合ID的CH10是最快的，其次是使用类进行find。另外两种方法明显较慢。 - Robert Koritnik

Answer 2

自己计时，亲身体验！

console.time("Selector 1") 
    $("selector1").find("selector2").find("selelector3");
console.timeEnd("Selector 1")

console.time("Selector 2") 
    $("selector1 selector2 selector3");
console.timeEnd("Selector 2")

- HurnsMobile

---

分别运行它们。根据浏览器的实现，第一个测试的工作可能会影响第二个测试的工作。 - user53791

@ mattcodes：也许我误解了你的意思，但如果您不缓存任何选择器结果，它们如何相互影响呢？ - Robert Koritnik

好的观点，它们应该分别进行测试。此外，这个赞让我获得了“1337”声望:D - HurnsMobile

你在 JavaScript 层面上并不缓存，但你不知道本地实现在幕后做了什么，通过观看 Google 关于浏览器如何通过不同的桶处理 CSS 选择器的视频等等，与本地选择器交互的方法的性能可能会影响结果。 - user53791

Answer 3

如果你在使用类的话，$("selector1 selector2 selector3") 和 $("selector1").find("selector2").find("selector3") 这两者有所不同。如果其中至少一个选择器是类，则在 IE 中前者运行速度会比较慢，因为 IE 不支持 document.getElementByClassname。同时，在 IE 中，如果 selector1 是一个类（同样由于之前提到的原因），后者的速度也会比较慢。我认为由于 IE 和 Firefox 可用的 jQuery 代码方法不同，难以找到跨浏览器的计时差异。

- scrappedcola

---

根据 http://jsperf.com/nested-find-vs 的测试结果，$('.class1...') 实际上是最快的选择器，甚至比 ID 还要快。 - Jim Mitchener

Answer 4

在审查了@jcm的发现后，我决定进一步测试这些选择器。我假设更复杂的DOM结构会产生非常不同的结果。

这是我创建的测试http://jsperf.com/complex-dom-jquery-selectors-vs-traversal-methods

这使用了最新的jQuery（v1.6）。看起来.find()比遍历方法快得多。这是非常有趣的消息。长期以来，许多jQuery用户（包括我自己）提供了建议，应该使用遍历方法（通常避免使用find方法）而不是选择器字符串。那就算了吧！

我想这里要学到的教训是，当绝对性能是必须的时候，不要仅仅依赖历史证据，而是要测试你的假设。

- Stephen