如何优化css的性能。

如何优化css的性能。

1.减少css嵌套，最好不要套三层以上，一般情况下块级元素加上类，里面的内联元素不用加，css写的时候块级class套内联tag，这样不仅可以减少css文件大小，还能减少性能浪费。

2.不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，前方嵌套完全是浪费性能。

//糟糕
div#nav{...}

//好的
#nav{...}

3.建立公共样式类，把长段相同样式提取出来作为公共类使用，比如我们常用的清除浮动，单行超出显示省略号等等等，当然如果你使用sass，继承会让你更加方便，sass让css的维护变的方便。

4.缩写css。

//糟糕
p{padding-top:10px;padding-right:15px;padding-bottom:20px;padding-left:25px;}

//好的
p{padding:10px 15px 20px 25px; }

5.减少通配符*或者类似[hidden=”true”]这类选择器的使用,整个查找所有，严重影响性能。当然重置样式这些必须的东西是不能少的。

6.有些人喜欢在类名前面加上标签名：p.ty_p 来进行更加精确的定位，但是这样往往效率更差，类名应该在全局范围公用的而非唯一的，所以这种做法不可取。

//糟糕
div.nav{....}

//好的
.nav{....}

7.巧妙运用css的继承机制，在css中很多属性是可以继承的比如颜色字体等等，父节点定义了，子节点就无需定义。

8.拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里，这样一次下载后就放到缓存里，当然这种做法会增加HTTP请求，具体做法应以实际情况而定。

9.拒绝css表达式，表达式看起来比较炫酷，但是要记住的是无论我们怎么炫酷，到了最后都是静态的，所以表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的，因为它并不只是计算一次，一些小的事件可能都会增加它为了有效准确而进行计算求值的次数。

10 .少用css reset，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要的，有需求有兴趣的朋友可以选择normolize.css。

11.cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种十分实用的技巧，极大减少了http请求。

12.css压缩(Gzip压缩,Gulp，YUI Compressor等)，减少css文件的大小。

13.CSS放在head中，减少repaint和reflow.相信做web的同学都知道这条建议，但为什么CSS放在页面顶部有利于网页优化呢？浏览器渲染页面大概是这样的，当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面，当遇到新的CSS的时候下载并结合现有CSS重新生成render tree，刚才的渲染工作就白费了，如果我们把所有CSS都放到页面顶部，这样就没有重新渲染的过程了。