CSS必须通过相对复杂的管道,就像HTML和JavaScript一样。浏览器必须从服务器下载文件,然后继续解析并将其应用于DOM。由于极高的优化水平,此过程通常非常快-对于不基于框架的小型Web项目,CSS通常只占总资源消耗的一小部分。

框架破坏了这种平衡。包括jQuery UI之类的JavaScript GUI堆栈,并观察CSS,JS和HTML大小的飞速增长。通常,开发人员通常会感到紧绷–当坐在带有T3互联网的功能强大的八核工作站后面时,没人在乎速度。随着等待时间或受CPU限制的设备的出现,这种情况会发生变化。

优化CSS需要采用多维方法。尽管可以使用各种技术来简化手写代码,但是手动检查框架代码效率很低。在这些情况下,使用自动最小化器可获得更好的结果。以下步骤将带我们踏上CSS优化世界的旅程。并非每一个都可能直接适用于您的项目,但请切记它们。

简化CSS代码

提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度。所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能。除了压缩代码之外,精简代码也是一种减小代码文件大小的手段。

精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护。常用简写属性包括 animationbackgroundborderfontmarginpaddingtransition等等。

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

可以简化成:

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

查找并删除未使用的CSS

减少不必要的CSS文件加载会极大地提高速度。利用Google的Chrome,只需转到“视图”>“开发人员”>“开发人员工具”,然后以最新版本打开“源”选项卡,然后打开“命令”菜单。之后,选择“显示覆盖率”,然后在覆盖率分析窗口上大吃一惊,突出显示当前网页上未使用的代码。

不要使用@import来导入CSS文件

@import 可以将结构添加到您的CSS代码中。但是 @import 可以嵌套,因此无法并行解析它们。建议使用<link>标记,浏览器可以立即获取这些标记。

简化颜色代码和不必要的单位

建议使用三位颜色描述,可以减少一部分CSS文件的大小。

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

CSS支持多种单位和数字格式。如果属性值为0就可以把单位删除掉,如下面的代码片段所示。此外,请记住,零始终是零,添加再多的单位也是一样。

	.target{
	padding: 0.2em;
	margin: 20.0em;
	avalue: 0px;
	padding: .2em;
	margin: 20em;
	avalue: 0;
}

删除过多的分号

这种优化在某种程度上至关重要,因为它会影响代码的更改。CSS的规范说明可以省略属性组中的最后一个分号。由于通过这种优化方法节省的资源很少,因此,我们主要针对那些正在使用自动优化器的人提及这一点。

使用雪碧图

由于http协议开销,加载多个小型图片效率低下。使用雪碧图可以将一系列小图片组合成一个大的PNG文件,然后通过CSS规则设置其图片的位置,将大大减少http请求的资源。

	.download {
  width:80px; 
  height:31px; 
  background-position: -160px -160px
}
.download:hover {
  width:80px; 
  height:32px; 
  background-position: -80px -160px
}

删除代码注释和压缩CSS代码

如果是在开发环境中,请删除掉代码的注释,代码注释会让攻击者更加了解你的网站漏洞和其他方面的问题。在项目上线后,请将CSS文件和JS文件等进行压缩,压缩后的文件大小将减少很多。

使用http/2协议和gzip压缩

http/2协议是http最新的协议,使用http/2协议后网站加载速度会有明显提升; gzip压缩可以压缩一些CSS、JS等文本文件,gzip通过对文件中相似的部分进行替换压缩,压缩比率通常在3到10倍左右,可以大大节省服务器的网络带宽。