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

Question

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

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

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

Answer 1

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

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

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

关于你的第二个问题：

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

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

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

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

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

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