Question

在选择某些DOM元素时，jQuery是多方面的。今天我注意到获得相同元素的两种方式可能产生不同的速度：

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

和

$("selector1 selector2 selector3")

（其中selectorX可以是ID或类或其他任何内容）

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

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

Answer 1

使用单个$('...')的速度大约是在Chrome中为我链接$.find()的速度的两倍。一旦有更多的人测试它，这个JSPerf Benchmark将为您提供其他浏览器的好主意。

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")

Answer 3

如果您正在使用类，则两者之间存在差异。如果由于缺少对document.getElementByClassname的支持，任何（或所有）选择器都是类，则$("selector1 selector2 selector3")在IE中会变慢。如果selector1是一个类（由于与之前相同的原因），在IE $("selector1").find("selector2").find("selector3")中也会更慢。由于IE和FF中jQuery代码可用的方法不同，我认为你不会发现跨浏览器时序。

Answer 4

在回顾了@jcm的调查结果后，我决定对这些选择器进行更深入的测试。我认为更复杂的DOM结构会产生很多不同的结果。

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

这使用最新的jQuery（v1.6）。似乎.find()比其他遍历方法更快速地跳跃和跳跃。这是一个非常有趣的消息。很长一段时间以来，jQuery的许多用户（包括我自己）已经提出了一个建议，即应该使用遍历方法（并且通常避免使用find方法）而不是选择器字符串。真是太棒了！

我想在这里要学到的教训是，当绝对表现是必须的时候，而不是仅依靠历史证据，检验你的假设。

什么更快$（“s1”）。find（“s2”）。find（“s3”）或$（“s1 s2 s3”）？

4 个答案: