CSS优化

177 阅读3分钟

CSS优化主要是从下面2个方面:

网络性能:把CSS写到字节数最少,加快下载速度,可以让页面渲染的更快一些

语法性能:主要是优化CSS语法

CSS压缩

就是把CSS中没用的空白符等删去,达到缩减字符个数的目的,一些常用的工具如:YUI Compressor、SASS等

gzip压缩

Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台,这个不止是对CSS,当应用Gzip压缩到一个纯文本文件时,效果是非常明显的,大约可以减少70%以上的文件大小(这取决于文件中的内容)

在没有gzip压缩的情况下,Web服务器直接把html页面、CSS脚本、js脚本发送给浏览器,而支持gzip的Web服务器将把文件压缩后再发给浏览器,浏览器(支持gzip)在本地进行解压和解码,并显示原文件。这样我们传输的文件字节数减少了,自然可以达到网络性能优化的目的。gzip压缩需要服务器的支持,所以我们需要在服务器端进行配置

在IIS上启用Gzip压缩(HTTP压缩)

apache启用gzip压缩方法

Nginx Gzip 压缩配置

合写CSS

主要是通过少写CSS属性来达到减少CSS字节的目的

.test{
 background-color: #000;
 background-image: url(image.jpg);
 background-position: left top;
 background-repeat: no-repeat;
}

合并以后:
.test{
  background: #000 url(image.jpg) top left no-repeat;
} 

利用继承

CSS的继承机制也可以帮我们再一定程度上缩减字节数,我们知道CSS有很多属性是可以继承的即在父容器设置了默写属性,子容器会默认也使用这些属性,因此如果我们希望全文字体尺寸是14px,大可不必为每个容器设置,只需要在body上设置就可以了。应用这个技巧,把CSS属性在可能的情况下提到父容器是可以帮我们节省CSS字节的,顺便说一下哪些属性可以继承

所有元素可继承:visibility和cursor

内联元素和块元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

块状元素可继承:text-indent和text-align

列表元素可继承:list-style、list-style-type、list-style-position、list-style-image

表格元素可继承:border-collapse

不可继承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi

抽离、拆分CSS,不加载所有CSS

抽离CSS是指把一些通用的CSS放到一个文件内,而不是写到各个页面,这样一次下载后,其它页面用到的时候就可以利用缓存了,减少不必要的重复下载。

CSS sprites

CSS图片精灵

CSS放在head中,减少repaint和reflow

浏览器渲染页面大概是这样的,当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面,当遇到新的CSS的时候下载并结合现有CSS重新生成render tree,刚才的渲染工作就白费了,如果我们把所有CSS都放到页面顶部,这样就没有重新渲染的过程了