当你具体时，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. Class，例如。 .promo
3. 输入，例如。 div
4. 相邻的兄弟，例如。 h2 + p
5. 孩子，例如。 li > ul
6. 后裔，*例​​如。 ul a*
7. Universal，即。 *
8. 属性，例如。 [type="text"]
9. 伪类/元素，例如。 a:hover

关于你的第二个问题：

  

有没有办法衡量CSS的效果？

史蒂夫·索德斯（Steve Souders）推出了一项在线测试来测量仍然可以访问的CSS的性能here。

现在有更好的方法来衡量效果，但这是一个可以快速轻松地使用的资源。

  

性能方面，这样的事情是否重要或完全取决于文本权重？

简短的回答是＆＃34;不是真的＆＃34;。

答案很长，＆＃34;它取决于＆＃34;。如果您正在开发一个简单的站点，除了您可能从最佳实践中获得的一般知识之外，没有必要对CSS性能大惊小怪。

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

Answer 2

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

这在引擎中很常见，但有一些小的增量。

参见这篇文章：Writing efficient CSS，虽然它来自MDN（因此是Mozilla-geared），但对于我对一般引擎的了解大多数都是正确的。

Answer 3

  

最佳案例与最差案例之间的差异为50毫秒。换句话说，考虑选择器性能，但不要浪费太多时间。   请参阅：https://smacss.com/book/selectors

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

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

免责声明：我不知道浏览器如何真正实现这些功能。我的结论基于相关文章。