优化CSS的方法
- 使用简写
- 查找并删除未使用的 CSS
- 内联关键 CSS
- 用 CSS 替换图片
- 使用颜色快捷方式
- 删除不必要的零和单位
- 删除过多分号
- 使用纹理图集
- 省略 px
- 避免需要性能要求的属性
- 删除空格
- 删除注释
- Sass 的检查
- 设置缓存
- 其它
# 使用简写
# 查找并删除未使用的 CSS
使用谷歌浏览器:
- 查看>开发人员>开发人员工具,并在最近的版本中打开Sources选项卡,然后打开命令菜单。然后,选择Show Coverage,在Coverage analysis窗口中高亮显示当前页面上未使用的代码
- 使用Audits进行逐行分析,打开开发者工具,点击 Audits 栏位,点击 Run audits 开始分析结果
# 内联关键 CSS
加载外部样式表需要花费时间,这是由于延迟造成的——因此,可以把最关键的代码位放在 head 中。
# 用 CSS 替换图片
例,以下这个代码片段可以确保所讨论的图片显示为其自身的灰度版本
# 使用颜色快捷方式
某些情况下,速记描述或颜色名称可以更短
# 删除不必要的零和单位
可以删除尾随和跟随的零
# 删除过多分号
允许省略属性组中的最后一个分号
# 使用纹理图集
将一系列小图片组合成一个大的PNG 文件,然后通过 CSS 规则将其分解
# 省略 px
为 0 的数值默认单位是 px—— 删除 px 可以为每个数字节省两个字节
# 避免需要性能要求的属性
影响性能的属性
# 删除空格
解析器的角度看,空格没有什么用处。在发布前删除它们,更好的方法是将此任务委托给 shell 脚本或类似的工具(gulp...)
# 删除注释
注释对编译器也没有任何作用,可以在发布前删除
# Sass 的检查
输出文件不一定最优
# 设置缓存
服务器上设置缓存头,非覆盖式发布等
# 其它
服务器使用 HTTP/2 和 gzip 压缩