CSS 和 jQuery 选择器速度答案

【问题标题】：CSS and jQuery Selector SpeedCSS 和 jQuery 选择器速度
【发布时间】：2011-05-04 22:42:24
【问题描述】：

每当我遇到这样的事情时，在 jQuery 中：

$("div#MyDiv").....

我通常对开发人员说：“不要费心把div 放在#MyDiv 前面，ID 选择器是最快的。”即

$("#MyDiv")....

这是因为后者将直接挂钩到 document.getElementById，而不是必须先扫描 DOM 中的所有 <div> 元素。

我的问题是，相同的规则是否适用于 CSS 选择器？ IE。而不是：

div#MyDiv
{
}

简单是不是更快？：

#MyDiv
{
}

（我意识到 CSS 选择器无论如何都非常快，所以实际上两者都不会产生显着差异。）

非常感谢

编辑

任何链接或参考都可能对本次讨论有用。谢谢:-)

【问题讨论】：

考虑以下情况：$("......").find("#foo")。哎哟。突然间，这些断言冲破了屋顶（虽然我不知道这种情况实际上是如何工作的。）无论如何，上面的两个 CSS 规则具有不同的优先级（带有标签的表单只是稍微高一点)。
@pst - 不确定我是否遵循。你能扩展吗？
考虑元素尚未附加到文档的情况。（ jQuery 如何处理这个问题？不过与最后一个问题无关。）

标签： jquery css jquery-selectors css-selectors

【解决方案1】：

是的，因为解析速度更快，而且浏览器不能检查元素是否也是<div>。（对于一些规则，用户感觉不到速度差异）

【讨论】：

【解决方案2】：

根据this Mozilla article，它确实有所作为，虽然只是一分钟。（请注意，虽然那篇文章讨论了 XUL 用户界面的样式，但 Gecko 布局引擎既用于呈现 Firefox 的用户界面和它加载的网页。）

无论如何，ID 都适用于 DOM 中的单个元素，因此尝试匹配标签名称所带来的性能损失是完全没有必要的，无论是否重要。更不用说它还会在您的样式表中浪费几个字节。

【讨论】：

不过，这篇文章没有用任何数据备份它。
@T.J.克劳德：是的，不幸的是。我现在能找到的就这么多了。

【解决方案3】：

我会说它极不可能对现实世界产生任何影响。理论上，是的，需要的检查更少（因为div#foo 确实需要div 来匹配选择器，根据the spec）。但它在现实世界的浏览器应用程序中产生任何真正影响的几率？接近于零。

也就是说，当我在 HTML 应用程序中看到像 div#foo 这样的东西时，我总是畏缩不前。 HTML 只有一个 ID 类型属性 (id)，因此无需进一步限定。您使 CSS 选择器引擎（浏览器或 jQuery 的）更加努力地理解您的意思，您使选择器变得脆弱（例如，如果 div 变为 footer）等等，当然还有您做让自己对一个愚蠢的选择器实现敞开心扉，它无法识别它可以通过 ID 查找某些东西，然后检查它是否是 div，然后继续查找通过所有divs。（这样的实现是否存在？可能，你永远不知道。）除非有一些边缘情况，它总是让我觉得有人不太清楚他们在做什么。

所以对我来说，速度不是主要论据。毫无意义是。 ;-)

【讨论】：

嗯，你可以有一个带有p#foo的页面和另一个带有div#foo的页面，两个页面都包含相同的Javascript，并且您只希望脚本适用于div#foo... 这不是一个理智的脚本或标记，只是说... ;o)
@deceze：当然，这将是我所说的边缘情况之一。（另一个是如果您想在页面上允许启用高级 HTML 的用户内容，并根据它是 div 还是 span 等来设置不同的样式）