选择器性能 - 'E#id' vs '#id' - 在 CSS 和 jQuery 中

Posted 2023-03-05

【中文标题】选择器性能 - \'E#id\' vs \'#id\' - 在 CSS 和 jQuery 中

【英文标题】：Selector Performance - 'E#id' vs '#id' - in CSS and jQuery选择器性能 - 'E#id' vs '#id' - 在 CSS 和 jQuery 中

【发布时间】：2012-02-19 07:12:58

【问题描述】：

在 CSS 和 jQuery 中使用选择器时，使用'E#id' 和 #id 之间是否存在效率差异，其中 E 是任何 html 元素？如果是，它是否仅适用于某些布局引擎和/或 javascript 引擎？

【问题讨论】：

一些新的（我的意思是最新的）浏览器有 CSS 性能检查器，让你自己测试。

在我看来，使用'E#id' 的唯一原因是，如果您只想选择具有该 ID 的元素 if 它是正确的类型，但我不能没有真正想到许多现实世界的例子，无论如何都不会有更好的方法来做到这一点。 （请记住 id 应该是唯一的，因此不应使用它来区分同一页面上的不同元素。）

id 在文档中只应出现一次，因此您不需要该选择器的元素名称部分。

实际上E#id 被认为是（如果还不错，那么）可以避免的做法。至于 JQuery，如果 f 关心性能，那么您应该使用 $('#foo') 而不是 document.getElementById('foo')。

接受的答案是错误的...

【参考方案1】：

浏览器从右到左读取选择器，因此在 id 之前添加任何前缀几乎没有什么好处；在这一点上是多余的。资源： Writing Efficient CSS 来自 Mozilla

这里有一个 real world example 供您自己测试。 TL：博士；这似乎不足以产生影响。

来自之前Stack Overflow question的相关进一步阅读

【讨论】：

其实E#id比#id具有更高的特异性。 Demo

@bookcasey 这与问题无关。就 javascript 和选择器引擎而言，OP 只对两个选择器之间的速度差异感兴趣..

【参考方案2】：

1) 认为对 CSS 使用 ID 不是一个好习惯。它应该在通过 javascript 操作内容时使用。

2) 使用标签名称 ul.top-nav 或 ul#top-nav 过度限定 CSS 选择器只会增加浏览器的开销，因为它必须匹配标签和类/ID。因此，请避免过度限定选择器。