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

Question

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

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

span {
  color: red;
  color: black;
}

在同一 block (上方)中的覆盖处理方式与下方不同:

span {
  color: red;
}
span {
  color: black;
}

关于从 CPU/GPU 的 Angular 来看规则是如何处理的，是否有我可以引用的好资源？关于如何应用 CSS 规则的高级信息有很多，但我想知道相互冲突的规则会造成多大的不同。就我而言，我可能忽略的冲突规则通常比我上面给出的简单示例复杂得多，涉及多个选择器、渐变、阴影等。

Answer 1

简而言之:是的，它在合成上花费的时间比绘画多(它将合并到一个在 Chrome DevTool 中可见的计算版本)

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

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

最好:写出更好的代码，这样事后的工作就更少 :D