CSS 当你具体的时候会更快吗?

Is CSS faster when you are specific?

div.container.container 快吗? 你知道在 jquery 中,如果你对你的选择器更具体,它会更快,因为它迭代更少.. css 是这种情况吗?

有没有办法衡量 css 中的表现? 就性能而言,这样的事情是否重要,还是基本上都取决于文本权重?

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

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

这在引擎中很常见,尽管有一些小的增量。

请参阅这篇文章:Writing efficient CSS,尽管它来自 MDN(因此适用于 Mozilla),但它适用于我对一般引擎的大部分了解。

delta between the best case and the worst case was 50ms. In other words, consider selector performance but don’t waste too much time on it. See: https://smacss.com/book/selectors

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

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

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

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

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

  1. ID,例如#header
  2. Class, 例如.promo
  3. 类型,例如div
  4. 相邻的兄弟姐妹,例如h2 + p
  5. Child, 例如li > ul
  6. 后代,*例如ul a*
  7. 通用,*
  8. 属性,例如[type="text"]
  9. Pseudo-classes/-elements、例如a:hover

关于你的第二个问题:

Is there a way to measure performance in CSS ?

Steve Souders 进行了一项在线测试来衡量 CSS 的性能,该测试仍然可以访问 here

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

Performance wise, does things like this even matter or does it all depend on text weight basically ?

简短的回答是 "not really"。

长答案是 "it depends"。如果您在一个简单的网站上工作,除了您可能从最佳实践中获得的一般知识外,真的没有必要对 CSS 性能大惊小怪。

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