类和属性选择器之间的 CSS 性能

Posted 2023-03-06

【中文标题】类和属性选择器之间的 CSS 性能

【英文标题】：CSS Performance between class and attribute selectors

【发布时间】：2014-04-12 14:45:25

【问题描述】：

我想知道使用属性选择器而不是类选择器是否存在性能问题。

div.test 
div[test] 

附注: 我只对 CSS 性能感兴趣，对 JS 不感兴趣。

【参考方案1】：

根据这个项目，没有真正的性能问题。

这让我们感到惊讶，因为选择器的性能并不是真正的 在我们的日常工作中关注了一段时间。前端性能是一个 当然，这很重要，但 CSS 选择器似乎贡献了这样一个 微不足道的总页面加载时间，它没有发生 我们认为这可能是许多人的主要担忧。

他们也有基准。 编辑：见评论：他们有基准想法*，而不是基准。

https://github.com/amcss/am-benchmarks

【讨论】：

他们没有基准，也没有任何数据。它说“在制品”。您粘贴的引用在上下文中阅读时，基本上是在说“我们没有注意到差异”。文章的其余部分说“这是我计划测试它的方式”，文章的最后部分说“还没有运行测试。WIP。”

【参考方案2】：

实际上有人创建了一个现实生活中的选择器测试来展示选择器匹配性能。

该表概述了与标准类相比，属性选择器的速度大约慢了 3 倍。

依赖属性选择器还需要更多字符来定位元素。最好定义简短的类名以保持样式表小。

例子：

// 17 Characters (attribute)
[title="example"] 
 ...


// 6 Characters (class)
.title 
 ...

http://scope.bitbucket.org/tests/selector-matching-performance/

【讨论】：

这两个选择器的比较不相等，如果不指定值：[title]，只是1个字符的差异。需要考虑的更重要的事情是 data- 前缀，如果您发现值得使用它来确保您的网站功能相同，以防将来将同名的新属性添加到 html 标准中，或者如果您需要使用 HTMLOrForeignElement.dataset 只读属性。虽然使用 gzip/压缩，但大小/字节很可能不会有太大差异。

答案中的链接已损坏。存档于web.archive.org/web/20160723023304/http://scope.bitbucket.org/…

【参考方案3】：

没有性能问题。两者的行为相同。但是类与元素的 css 的特异性存在差异。

特异性 - 特异性决定了浏览器应用哪个 CSS 规则。

如果两个选择器应用于同一个元素，则具有更高特异性的选择器获胜。

但特异性是有等级的。

内联样式（文档中的样式）。 内联样式存在于您的 XHTML 文档中。它直接附加到要设置样式的元素上。例如。 ID（ID 选择器的数量） ID 是您的页面元素的标识符，例如#div。 类、属性和伪类（类选择器的数量）。 该组包括 .classes、[attributes] 和伪类，例如 :hover、:focus 等。 元素和伪元素（# of Element（类型）选择器）。 包括例如 :before 和 :after。

来源：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

因此div.test 更具体。

【讨论】：

我的印象是问题与特异性无关。

您是否阅读过您引用的文字？它将类和属性组合在一起，使它们相等，所以div.test 不能比div[test]更具体。

@BoltClock 对不起，我的意思是元素。

这只是使关于特异性的整个部分无关紧要，因为问题实际上是询问类和属性，而不是类和元素。如果我是 OP，我可能会接受 Anthony 的回答，即使他主要是一个链接和一个声明。

你是对的..但我认为 OP 向我询问了一些文章和一些信息来阅读这些东西..因此链接和解释

【参考方案4】：

根据this article，类选择器比属性选择器效率更高。

【讨论】：

谢谢，有趣的文章。 :)

Angular-material 团队最近在 IE11 上遇到了巨大的性能问题，因为使用属性选择器而不是类选择器 github.com/angular/material/issues/1771。但是 Chrome 和 Firefox 似乎可以很好地使用属性选择器。

这篇文章已有 7 年历史。有最新的基准吗？

但不是任何真实世界的数量。引用那篇文章后，一个诚实的答案是“类选择器可能更有效，但不太可能对现实世界产生影响。”问题是“是否存在性能问题”，所以答案是“可能没有”。