常用CSS优化总结——网络性能与语法性能建议

关于CSS的优化工作主要从两个方面着手

• 网络性能：把CSS写到字节数最少，加快下载速度，自然可以让页面渲染的更快一些  合并压缩css文件等
• 语法性能：优化语法  合并css语句

CSS压缩

就是把我们CSS中没用的空白符等删去，达到缩减字符个数的目的

.test{
    background-color:#ffffff;
    background-image:url(a.jpg);
}

经过压缩后会变成这样

.test{ background-color:#fff;  background-image:url(a.jpg)}

常用压缩工具

YUI Compressor

CSS Compressor

CSS drive

Clean CSS

gzip压缩

Gzip是一种流行的文件压缩算法，现在的应用十分广泛，尤其是在Linux平台，这个不止是对CSS，当应用Gzip压缩到一个纯文本文件时，效果是非常明显的，大约可以减少70％以上的文件大小（这取决于文件中的内容）。想进一步了解gzip看看维基百科。

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

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

apache启用gzip压缩方法

Nginx Gzip 压缩配置

当然除了gzip压缩，缓存也是我们需要注意的，这和CSS优化关系不大了，在说web优化的时候再说

合写CSS

除了压缩的方式，我们还可以通过少写CSS属性来达到减少CSS字节的目的，拿个最常见的例子

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

我们可以改写一下上面的CSS，达到同样的效果

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

font

{font-style: oblique; font-weight: bold; font-size: 16px; font-family: Helvetica, Arial, Sans-Serif;}

{font: oblique bold 16px Helvetica, Arial, Sans-Serif;} 

margin/padding

{margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 15px;}

{margin: 5px 10px 20px 15px;} 

{padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;}

{padding:5px;}

background

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

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

border

{border-width: 2px; border-style: solid; border-color: #000;}

{border: 2px solid #000;}

{border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;}

{border: 2px 5px 10px 3px;}

CSS3添加的很多属性如transform、animation相关的都可以合写

利用继承

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

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

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

应用抽离原则，在很多时候我们把页面通用的CSS写到了一个文件，这样加载一次后就可以利用缓存，但这样做并不适合所有场景，以前我写CSS把一些前端插件用的CSS全写到了一个页面，但是有时候页面只会用一个Dialog、有的页面只用到了一个TreeView，但却把十多个插件的CSS都下载到了页面，这就是问题了，所以虽然把CSS写道一个文件可以减少http请求，但像刚才的这种情况是不应该这样做的.

CSS放在head中，减少repaint和reflow

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

reflow：当DOM元素出现隐藏／显示、尺寸变化、位置变化的时候都会让浏览器重新渲染页面，之前渲染工作白费了

repaint：当元素的背景颜色、边框颜色不引起reflow的变化是会让浏览器重新渲染该元素。貌似还可以接受，但如果我们在开始就定义好了，不让浏览器重复工作就更好了。 

避免适用通配符或隐式通配符

CSS中的*代表通配符，虽然好用但使用不当这也是一个恶魔，比如

body * {padding:0;margin:0;} 

我们以为这是对body的子结点都设置一些属性，但因为CSS继承特性的原因，页面所有元素都会接受这个规则，对于复杂的页面在性能上的影响还是很大的，这并不是说不能使用通配符，而是说使用的时候要注意范围。

一些隐式的通配符

:visible{
  padding:0;
}

这样的几乎就和通配符一样，在使用的时候一定要注意范围限制问题

避免层级或过度限制的CSS

CSS是从右到左解析的，

不要用标签或 class 来限制 ID 规则

这个应该是个常识，但很多同学都会误用，写出#test.info或者div#test这样的选择器，这个只能说是画蛇添足，id已经可以唯一而且最快的定位一个元素了

不要用标签名限制 class 规则

这个估计被误用的更多，如div.info这样的写法，其实我们可以直接写为.info，从右到左解析的原因可以知道为什么其低效，如果直接使用class不能达到目的，一般情况下应该是class设计的有问题，CSS需要重构了

尽量使用最具体的类别、避免后代选择器、属于标签类别的规则永远不要包含子选择器

这三条规则是想通的，因为从左到右解析关系，在CSS选择器中后代选择器非但没有帮我们加快CSS查找，反而后代选择器是 CSS 中耗费最昂贵的选择器。 它的耗费是极其昂贵的—特别是当选择器在标签或通用类别中，建议是当使用子选择器时要十分谨慎，能免则免。对此我们可以通过具体类别——使用单一或尽量少的class解决。