当您特定时，CSS 会更快吗？

Posted 2023-02-21

【中文标题】当您特定时，CSS 会更快吗？

【英文标题】：Is CSS faster when you are specific?

【发布时间】：2015-06-07 21:43:30

【问题描述】：

div.container 比 .container 快吗？ 你知道在 jquery 中，如果你更具体地使用你的选择器，它会更快，因为它迭代更少.. css 是这种情况吗？

有没有办法衡量 css 的性能？ 性能方面，这样的事情是否重要，或者它基本上都取决于文本重量？

如果有人知道答案，我会很高兴，我实际上发现了一个没有确定答案的类似问题。 Can CSS be more efficient if it is better specified?

【问题讨论】：

我会说 .container 比 div.container 快，因为它使用的字节数较少（因此 css 传输速度更快）。至于浏览器渲染内容，我不知道。

这取决于实现。

我无法支持这一点，但我坚信这无关紧要。每个浏览器的渲染周期都会根据每个样式规则查询每个元素以匹配

请定义“更快”。差异必须小于毫秒，真的很重要吗？可能使 CSS 渲染变慢的是您为规则设置的属性，而不是选择器本身。

如果两个选择器匹配相同的元素，那么 div.container 应该会更慢，因为它 (a) 匹配所有 .container 元素 (b) 过滤掉 div 元素。

【参考方案1】：

在现实世界中，速度差异可以忽略不计。 作为技术人员.container 会更快，因为它需要处理的选择器更少。

选择器具有固有的效率。 CSS 选择器从高到低的顺序是这样的：

ID，例如#header 类，例如.promo 类型，例如div 相邻的兄弟，例如h2 + p 孩子，例如li > ul 后裔，*例​​如ul a* 通用，即* 属性，例如[type="text"] 伪类/元素，例如a:hover

关于你的第二个问题：

有没有办法衡量 CSS 的性能？

Steve Souders 推出了一项在线测试来衡量 CSS 的性能，该测试仍然可以访问 here。

现在有更好的方法来衡量性能，但这是一种快速简便的资源，您可以使用。

在性能方面，这样的事情是否重要，或者它基本上都取决于文本重量？

简短的回答是“不是真的”。

答案很长，“视情况而定”。如果你在一个简单的网站上工作，除了一般知识之外，你真的没有必要对 CSS 性能大惊小怪，你可以从最佳实践中获得。

如果您要创建一个包含数万个 DOM 元素的网站，那么是的，这很重要。

【讨论】：

我读得越来越远，但仍然没有一个确切的答案。我曾经认为具体化更好，但似乎它对 CSS 的工作方式相反，你越具体，它变得越糟糕，因为它每次都遍历整个 DOM 树。所以，我想我会尽量让我的规则保持一般性。

您列出的名称是“Steve Sounders”，但 url 有“Steve Souders” - 这是拼写错误吗？

如果你想测试 CSS 性能，你也可以调整窗口大小。如果它没有显示内容，那么 CSS 太重了。

@xengravity：但是你在他的姓氏中拼写了一个“n”，而他的域名没有一个。这就是为什么克里斯认为两者之一可能是错误的:-)

关于“内在效率”的部分以及选择器的顺序是从 Steve Souders 的书中抄袭的（以及在线引用的csswizardry.com/2011/09/writing-efficient-css-selectors）。但是，如果我们要谈论“固有效率”，我发现很难相信通用选择器的排名会那么低，因为它是任何非无特征元素的保证匹配。但我不是史蒂夫·苏德斯……

【参考方案2】：

最佳情况和最坏情况之间的差值是 50 毫秒。换句话说，考虑选择器的性能，但不要在这上面浪费太多时间。 见：https://smacss.com/book/selectors

所以我认为仅仅为了获得更高的性能而扩展 CSS 规则并没有多大意义。只需考虑更高的网络流量，可能更差的可维护性，...... 但是，您可以在链接中阅读，无需增加 CSS 大小即可考虑哪些规则。

如果 .container 和 div.container 匹配页面上完全相同的元素，第一个可能会更快：如果浏览器首先评估 .container，实际上它已经完成，但使用 div.container 它有另外检查元素是否为 div。

免责声明：我不知道浏览器是如何真正实现这些东西的。我的结论基于链接的文章。

【参考方案3】：

一般来说，规则越少越好，所以 .container 会比 div.container 快。除了缓存之外，首先读取 .container，然后其他元素必须添加 div 作为二级过滤器......在许多情况下是不必要的。

这在引擎中很常见，尽管有一些小的差异。

请参阅这篇文章：Writing efficient CSS，尽管它来自 MDN（因此是 Mozilla 驱动的），但我对引擎的大部分了解都适用。

【讨论】：

我会反对“规则越少越好”的口头禅。 * 比说：html > body > div > .container 更糟糕另一方面，“更具体的规则更好”的想法当然是正确的。

您提出了一个有趣的观点，但我认为 * 实际上应该比 html>body>div>.container 更快。 * 所做的是将自己插入到所有标签的默认浏览器样式表之上。由于 CSS 基本上是一个三明治模型，这只是使它成为一个较低级别（因此不太具体）的选择器，但它胜过默认样式。这并不是说您要对每个对象进行 memcopy（就像您通过 jquery 或其他东西一样）。因此，尽管您所说的某些元素可能是正确的，但暗示 * 本质上比运行 5 条规则要慢是值得商榷的。

@JohnGreen 那么为什么需要css Combinator？为什么不使用特定的类名，例如“UserdivContainerLinke”而不是“.User .Container>a”？？