css性能提高优化的方法

css是由选择器、属性和属性值构成的。

css匹配原理：

例如：

<div class="con">   
    <div class="loulan">   
        <p><span>文字</span></p>   
    </div>   
</div>   


//css:
.con .loulan p span{display:block}

css的匹配原理不是从左到右的，而是从右到左的，也就是说上面这行代码里面，先查找到页面里面所有的span元素形成一个集合，再在所有的span元素往上查找，看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢寻找，把父元素不是p元素的删去，再往上查找看集合里的有p元素又多少它的父元素的类是loulan...上面这行代码渲染起来很耗性能

其实上面这行代码我们可以简写为：.loulan span{display:block}或者给span元素添加一个类，然后给这个类直接定义样式，如：

<div class="con">
    <div class="loulan">
        <p><span class="loulanSpan">文字</span></p>
    </div>
<div>


//css
.loulanSpan{display:block;}

css选择器权值：权值越大，优先级越高  id:100   class:10   标签:1

怎样来优化css提高性能呢，请看下面：

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

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

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

4，缩写css，其中包括缩写maigin，padding，颜色值等等，要是有两个或者两个以上的margin-****，写成margin: * * * *有助于文件大小。

5，减少通配符*或者类似[hidden="true"]这类选择器的使用，当然重置样式这些必须的东西是不能少的。

6，在类名前面加上标签名：p.ty_p 来进行的定位，这样往往效率更差，类名应该在全局范围除非公用是唯一的，所以这种做法是应该片面的。

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

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

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

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

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

 

 

 

css性能优化的地方很多，总结如下：
1.慎重使用高性能属性：浮动、定位；
2.尽量减少页面重排、重绘
重排按照css的书写顺序：
位置：positon、top、left、z-index、float、dispay
大小：width、height、margin、padding
文字系列： font、line-height、color、letter-spacing
背景边框：background、 border
其它：anmation、transition
重绘:border、outline、background、box-shadow,能使用background-color,就尽量不要使用background;
3.去除空规则：｛｝；
4.属性值为0时，不加单位；
5.属性值为浮动小数0.**，可以省略小数点之前的0；
6.标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后；（例如：-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;）
7.不使用@import前缀，它会影响css的加载速度；
8.充分利用css继承属性，减少代码量；
9.抽象提取公共样式，减少代码量；
10.选择器优化嵌套，尽量避免层级过深；
11.css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用;
12.将css文件放在页面最上面