html – 冲突的CSS规则如何影响性能?

前端之家收集整理的这篇文章主要介绍了html – 冲突的CSS规则如何影响性能?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在清理一些旧的CSS,我不确定我是否已注释掉或删除了所有相互冲突的规则.该项目使用大量的cpu进行渲染,这就是为什么我要问一个看似相对较小的优化的原因.

例如,如果我有这样的CSS,浏览器是否会花时间在规则颜色上:红色?

span {
  color: red;
  color: black;
}

是否在同一块(上面)中覆盖的处理方式与下面不同:

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

有没有一个很好的资源我可以参考从cpu / GPU角度处理规则的确切方式?关于如何应用CSS规则的高级别有很多信息,但我想知道冲突规则有多大区别.在我的情况下,我可能忽略的冲突规则通常比上面给出的简单示例复杂得多,涉及多个选择器,渐变,阴影等.

解决方法

简短:是的,它花费了一些时间来构图而不是绘画(它将合并为一个在Chrome DevTool中可见的计算版本)

Long:你更倾向于在3G设备而不是组合上推动CSS的大小.当你向每个人推送不必要的代码时,每个人都会咬一口.

主要规则:通过PostCSS,本地或管道优化那个和其他简单的任务:)甚至通过在线处理器.

最佳:编写更好的代码,以便以后减少工作量:D

原文链接:https://www.f2er.com/html/226743.html

猜你在找的HTML相关文章