jquery - 在 jQuery 中，选择器或等效函数哪个更快，或者取决于什么？

Question

我经常想知道 jQuery 中选择器和等效函数的使用。我的意思是包含返回相同结果集的相同组件的语句，但构造方式不同。

看下面的例子:

alert($("#FundManager1>option").length);
alert($("#FundManager1").find("option").length);

(注意:目的是两个等效的查询 - 如果它们并不总是相同，如果您能指出这一点，我将不胜感激)

那么，考虑到上面的例子，速度/性能有什么真正的区别吗？显然，前者更短，因此会导致上传/下载的字节数更少，但我目前对此并不感兴趣。

Answer 1

我想说第一个更快，因为它只解析一个 CSS 选择器并且只查找子代，而第二个必须解析两个，并且必须查找所有后代。

但我不会为这么小的事情而烦恼。由于 JavaScript 在 WebKit 和 Gecko 中确实很快，并且在 IE 中仍然相对较快，因此没有人会注意到其中的差异。

<小时/>

通过查看 jQuery/Sizzle 我可以看到源代码，两段代码在内部执行相同的操作。

首先执行 document.getElementById('FundManager1') ( Sizzle 足够聪明，知道这就是 #FundManager1 的含义)，然后搜索 option 是使用它作为上下文来完成的。这两段代码唯一的区别是使用 > 选择器，导致 Sizzle仅搜索上下文的直接子代，而不是所有后代。我认为这会更快，因为只需要探索一层 DOM 层次结构。

<小时/>

另一个编辑:

以上文字仅适用于不支持document.querySelectorAll(css_selector)方法的浏览器!在支持的浏览器中(WebKit 和 Gecko，也许是 Opera？)，使用此方法而不是 Sizzle ，这样所有 CSS 选择器解析都是由浏览器本身完成，而不是由 jQuery 框架完成，我确信后者要快得多。