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

在前端面试中最多见的问题就是页面优化和缓存（貌似也是页面优化），被问了几回后心虚的不行，平然平时多少会用到一些，但忽然问我，很难把本身知道的都说出来。页面优化明显不是一两句可以说完的，这两天总结了一下CSS相关的优化知识，写篇博客梳理一下，还望你们多多指教

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

• 网络性能：把CSS写到字节数最少，加快下载速度，天然可让页面渲染的更快一些
• 语法性能：一样都能实现某些效果，但并非全部的方式效果都相同，咱们看过很多关于JavaScript方面的语法优化知识，其实CSS里面也有一些

CSS压缩

CSS压缩并非什么高端的姿式，但却颇有用，其原理很简单，就是把咱们CSS中没用的空白符等删去，达到缩减字符个数的目的

咱们有这样一段CSS脚本

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

通过压缩后会变成这样

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

固然高级些的压缩工具也会帮咱们优化一些语法，提供不少选项，让咱们的压缩更有控制，以前在的公司不采用CSS压缩，因此我没有什么实践经验，本身写东西经常使用的是YUI Compressor，有不少在线版的很方便

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;
} 

在CSS中还有不少相似的属性能够合写

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: 10px; padding-bottom: 5px; padding-left: 10px;}

{padding: 5px 10px}

{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字节的，顺便说一下哪些属性能够继承

• 全部元素可继承：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放到一个文件内，而不是写道各个页面，这样一次下载后，其它页面用到的时候就能够利用缓存了，减小没必要要的重复下载。

应用抽离原则，在不少时候咱们把页面通用的CSS写到了一个文件，这样加载一次后就能够利用缓存，但这样作并不适合全部场景，之前我写CSS把一些前端插件用的CSS全写到了一个页面，可是有时候页面只会用一个Dialog、有的页面只用到了一个TreeView，但却把十多个插件的CSS都下载到了页面，这就是问题了，因此虽然把CSS写道一个文件能够减小http请求，但像刚才的这种状况是不该该这样作的，对一些全部页面都会用到的咱们能够这样作，因此咱们在抽离和拆分的时候可要想好了。

CSS sprites

 这个其实算不上是CSS优化，应该说是web优化用到了CSS的技巧，顺便提一下，有兴趣同窗能够看看使用CSS sprites减小HTTP请求。

 

网络性能方面能想到的就暂时这么多了，但愿你们帮忙指正和补充，看一些语法上的性能优化

CSS放在head中，减小repaint和reflow

相信作web的同窗都知道这条建议，但为何CSS放在页面顶部有利于网页优化呢？浏览器渲染页面大概是这样的，当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面，当遇到新的CSS的时候下载并结合现有CSS从新生成render tree，刚才的渲染工做就白费了，若是咱们把全部CSS都放到页面顶部，这样就没有从新渲染的过程了。对浏览器工做原理有兴趣的同窗能够看看神文

浏览器的工做原理：新式网络浏览器幕后揭秘，相信会对浏览器工做原理有深刻的认识。

相似的咱们知道了这个也应该在脚本中注意尽可能减小repaint和reflow，什么状况会致使这两种状况呢

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

repaint：当元素的背景颜色、边框颜色不引发reflow的变化是会让浏览器从新渲染该元素。貌似还能够接受，但若是咱们在开始就定义好了，不让浏览器重复工做就更好了。 

不用CSS表达式

不管怎样生成的CSS，最终咱们放到页面上得是静态普通文本，没有变量、计算神马的，CSS表达式是一种动态设置CSS属性的东东，被IE5-IE8支持，看一个你们经常使用的例子

body {
  background-color: expression((new Date()).getHours()%2?"#B8D4FF":"#F08A00");
}

 这样咱们赋予了CSS相似JavaScript的功能，CSS表达式很是强大，甚至可使用CSS表达式实现 min-width 属性，隔行换色，模拟 :hover, :before, :after 等伪类，看起来能解决不少IE下的浏览器兼容性等问题，可是其带来的反作用超出咱们的想象，这条CSS规则并非只运行一次，为了确保有效性，CSS表达式会进行频繁的求值，当改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行求值，如此频繁的求值以致于浏览器的性能收到严重的影响。据《高性能网站建设建议》中的测试其执行次数远远超出咱们想象，感兴趣同窗能够进去看看，咱们的建议就试尽可能避免甚至不要使用CSS表达式。

不乱用CSS reset或属性设置

在网站建设中咱们常用一些CSS reset，达到跨浏览器统一的目的，可是不少时候咱们的CSS reset过于臃肿，主要有两个问题

1. 把不少浏览器对元素的默认属性有设置了一边，好比div的padding和margin为0啊什么的，这是没有必要的
2. 把一些很不经常使用的元素的设置也写进了CSS reset，如 ruby这样的元素

前几天写了篇关于CSS reset的博客常见标签的默认属性值及相互做用——关于CSS reset的思考，都是一些我的认识，但愿你们批评指正

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

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

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

咱们觉得这是对body的子结点都设置一些属性，但由于CSS继承特性的缘由，页面全部元素都会接受这个规则，对于复杂的页面在性能上的影响仍是很大的，这并非说不能使用通配符，而是说使用的时候要注意范围。相信这个规则你们都知道，可是有一些隐式的通配符也须要咱们的注意，好比

:visible{
  padding:0;
}

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

避免层级或过分限制的CSS

估计web开发的同窗都看过MDN上Writing efficient CSS或者其各类翻译版本，文中总结了几点在书写CSS selector的意见，搞明白文中建议的一个前提是得知道CSS是从右到左解析的，而不是咱们认为的从左到右，关于为何这样作确定是由于高效，不明就里的同窗能够上网搜一下相关知识。

抄袭一下文章内容

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

这个应该是个常识，但不少同窗都会误用，写出#test.info或者div#test这样的选择器，这个只能说是多此一举，id已经能够惟一并且最快的定位一个元素了

不要用标签名限制 class 规则

 这个估计被误用的更多，如div.info这样的写法，其实咱们能够直接写为.info，从右到左解析的缘由能够知道为何其低效，若是直接使用class不能达到目的，通常状况下应该是class设计的有问题，CSS须要重构了

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

这三条规则是想通的，由于从左到右解析关系，在CSS选择器中后代选择器非但没有帮咱们加快CSS查找，反而后代选择器是 CSS 中耗费最昂贵的选择器。 它的耗费是极其昂贵的—特别是当选择器在标签或通用类别中，做者给的建议是当使用子选择器时要十分谨慎，能免则免。其开销可见一斑了。

对此咱们能够经过具体类别——使用单一或尽可能少的class解决。

最后

日常用到和了解的关于优化CSS达到页面优化的手段就这些了，但愿你们给出意见和补充。