“慢” CSS 选择器何时会影响性能？答案

【问题标题】：When would a "slow" CSS selector affect performance?“慢” CSS 选择器何时会影响性能？
【发布时间】：2014-04-16 11:51:32
【问题描述】：

假设我们有这样的样式声明：

body > div > input:hover ~ label {
    color: red;
}

按照我的理解，解析器会找到所有标签，过滤哪些标签跟随悬停的input，这是div 的直系后代，body 的直系后代。

我很想知道这是否会在输入的悬停状态发生变化时执行，或者仅在一个文档加载时执行（放置在某种查找表中）。

如果我想使用大量复杂的选择器（出于不相关的原因），页面在状态和效果之间的渲染会变慢，还是只会影响页面的初始加载时间？

【问题讨论】：

除了性能之外，跨浏览器的兼容性也是一个问题。（例如，~ 通用兄弟选择器仅从 CSS3 开始可用：developer.mozilla.org/en-US/docs/Web/CSS/…）
我知道了，只是用它作为例子。
虽然有点老了，但这个post值得一读。
“我很想知道这是在输入的悬停状态发生变化时执行，还是仅在一个文档加载时执行（放置在某种查找表中）。”这类东西实际上取决于实现 - 您获得答案的机会主要取决于参考文档甚至是可用的来源。

【解决方案1】：

参考这个post的答案，CSS性能差异并不显着。但是，如果你使用 jQuery 等 JS 库来选择元素，如果使用相同的选择器，性能会有很大差异。

此外，如果 CSS 是否被缩小，性能会有所不同，合并为 1 个文件/多个文件。

理论上，在网速较慢的情况下，CSS 文件大小也会影响加载性能，但 CSS 文件大小通常非常小，因此可以放心地忽略这一点，除非您关心那些使用 56K 调制解调器的用户。

【讨论】：