冲突的 CSS 规则如何影响性能？

Posted 2023-03-06

【中文标题】冲突的 CSS 规则如何影响性能？

【英文标题】：How do conflicting CSS rules affect performance?

【发布时间】：2019-03-06 00:07:59

【问题描述】：

我正在清理一些旧的 CSS，但我不确定我是否已注释掉或删除了所有冲突的规则。该项目使用大量 CPU 进行渲染，这就是为什么我要问一个看起来相对较小的优化。

例如，如果我有这样的 CSS，浏览器会花时间在规则 color: red 上吗？

span 
  color: red;
  color: black;

在同一个块（上面）中覆盖的处理方式与下面的不同：

span 
  color: red;

span 
  color: black;

是否有一个很好的资源可供我参考，以了解从 CPU/GPU 的角度来看规则是如何处理的？有大量关于如何应用 CSS 规则的高级信息，但我想知道冲突规则会产生多大的差异。就我而言，我可能忽略的冲突规则通常比我上面给出的简单示例要复杂得多，涉及多个选择器、渐变、阴影等。

【问题讨论】：

这里可能有一些有趣的阅读，尽管它不是关于特别是冲突的规则benfrain.com/…

“是否有一个很好的资源可供我参考，以了解从 CPU/GPU 的角度来看规则是如何处理的？”可能不是因为这是一个实现细节，即使跨浏览器也不一定相同。级联解析是 CSS 处理的基本部分（它是“C”代表的意思），将其视为性能责任等同于将 CSS 本身视为性能责任。优化你的 CSS 不是为了避免像瘟疫那样的级联，而是为了避免不必要的重复 (DRY)。

@BoltClock，我会选择一种资源，它甚至可以解决任何一个浏览器（除了 IE/Edge）如何处理这个问题。这将提供有用的见解。优化当然是最好的选择，但这个问题更多的是，“这在我的一百万个优先级列表中应该有多高？”

【参考方案1】：

简短：是的，它花费更多时间来合成而不是绘制（它将合并到一个在 Chrome DevTool 中可见的计算版本）

Long：在 3G 设备上推送的更多是 CSS 的大小，而不是组合。当您将不必要的代码推送给每个人时，每一口都很重要。

主要规则：通过 PostCSS，在本地或在管道中优化该任务​​和其他简单任务 :) 甚至通过在线处理器。

最好的：写出更好的代码，减少工作量：D