当你具体时,CSS会更快吗？

Question

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

有没有办法衡量css的性能？性能方面,这样的事情是否重要甚至完全取决于文本权重？

如果有人知道答案,我会很高兴,我实际上找到了一个类似的问题而没有确定的答案. 如果更好地指定CSS可以更有效吗？

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性能.

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

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

简短的回答是"不是真的".

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

如果您正在创建一个包含数万个DOM元素的站点,那么它就很重要了.

Answer 2

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

尽管存在一些细微的差异，但这在引擎中很常见。

请参阅这篇文章： 编写高效的 CSS，尽管它来自 MDN（因此适合 Mozilla），但它适用于我对引擎的大部分了解。