优化CSS加快网站速度的方法

2019-07-07 14:11:36

优化CSS的方法

使用简写

p { margin-top: 1px;
    margin-right: 2px;
    margin-bottom:  3px;
    margin-left: 4px; }

p { margin: 1px 2px 3px 4px; }

查找并删除未使用的 CSS

使用谷歌浏览器:

  • 查看>开发人员>开发人员工具,并在最近的版本中打开Sources选项卡,然后打开命令菜单。然后,选择Show Coverage,在Coverage analysis窗口中高亮显示当前页面上未使用的代码
  • 使用Audits进行逐行分析,打开开发者工具,点击 Audits 栏位,点击 Run audits 开始分析结果

内联关键 CSS

加载外部样式表需要花费时间,这是由于延迟造成的——因此,可以把最关键的代码位放在 head 中。

用 CSS 替换图片

例,以下这个代码片段可以确保所讨论的图片显示为其自身的灰度版本

img {
    -webkit-filter: grayscale(100%); 
    /* old safari */
    filter: grayscale(100%);
}

使用颜色快捷方式

某些情况下,速记描述或颜色名称可以更短

target { background-color: #ffffff; }
target { background: #fff; }

删除不必要的零和单位

可以删除尾随和跟随的零

padding: 0.2em;
margin: 20.0em;
font-size: 0px;

padding: .2em;
margin: 20em;
font-size: 0;

删除过多分号

允许省略属性组中的最后一个分号

div {
. . .
	font-size: 1.33em
}

使用纹理图集

将一系列小图片组合成一个大的PNG 文件,然后通过 CSS 规则将其分解

省略 px

为 0 的数值默认单位是 px—— 删除 px 可以为每个数字节省两个字节

div {padding:0px; margin:0px;}

div {padding:0; margin:0}

避免需要性能要求的属性

影响性能的属性

border-radius
box-shadow
transform
filter
:nth-child
position: fixed;

删除空格

解析器的角度看,空格没有什么用处。在发布前删除它们,更好的方法是将此任务委托给 shell 脚本或类似的工具(gulp...)

删除注释

注释对编译器也没有任何作用,可以在发布前删除

Sass 的检查

输出文件不一定最优

设置缓存

服务器上设置缓存头,非覆盖式发布等

其它

服务器使用 HTTP/2 和 gzip 压缩

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码

评 论:

好文推荐
每天进步一点点~