时间戳

首页 > 解决方案 > 冲突的 CSS 规则如何影响性能？

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

问题描述

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

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

span {
  color: red;
  color: black;
}

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

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

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

标签： htmlcsssassless

解决方案

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

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

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

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

推荐阅读