jQuery 选择器的性能特征与 CSS 选择器的性能特征有何不同？

Posted 2023-03-06

【中文标题】jQuery 选择器的性能特征与 CSS 选择器的性能特征有何不同？

【英文标题】：How do the performance characteristics of jQuery selectors differ from those of CSS selectors?

【发布时间】：2010-12-23 04:48:57

【问题描述】：

我昨天遇到了 Google 的 Firebug 页面速度插件。 The page 关于使用高效的 CSS 选择器，据说不使用过度限定的选择器，即使用 #foo 而不是 div#foo。我认为后者会更快，但 Google 的说法不是这样，我该反对谁？

这让我想知道是否同样适用于 jQuery 选择器。 This page 我发现 SO 上的链接说我应该使用 $("div#foo")，这就是我一直在做的事情，因为我认为通过限制选择器仅匹配 div 元素会加快速度。但它真的比写$("#foo") 像谷歌对 CSS 选择器的说法更好吗，或者 CSS 与 jQuery 元素匹配的工作方式不同，我应该坚持使用$("div#foo")？

【问题讨论】：

这不也取决于浏览器吗？ IE：谷歌浏览器非常重视 javascript 处理。

这不相关。当然，不同的浏览器以不同的速度执行 Javascript。然而，我想知道的是，哪种方法的时间复杂度更高，而在不同浏览器中的执行速度没有任何关系。

【参考方案1】：

$("#foo") 优于 $("div#foo")

由于 id 在文档中是唯一的，因此您不必在其前面加上标签名称。

这是一个不错的链接

jQuery Performance Rules

【讨论】：

谢谢。所以它是#foo 而不是 div#foo。该页面还提到使用 div.foo 而不仅仅是 .foo。那么它也适用于 CSS 吗？

【参考方案2】：

Sizzle 选择器引擎从右到左解析选择器。

尽可能多地使用 ID 来提高性能。

【参考方案3】：

选择器越具体，Sizzle（jQuery 的选择器引擎）找到该对象的速度就越快。

原因：getElementsByTagName 用于将搜索范围缩小到少数情况。

但这不适用于唯一的 id 名称！