CSS性能分析，如何优化CSS提高性能

不负十年后的自己，共勉！

前端性能优化一直是一个比较热门的话题，我们总是在尽我们最大的努力去，提高我们的页面性能，比如减少HTTP请求，利用工具对资源进行合并压缩，脚本置底，避免重复请求，css sprite等等。其实大量的方法都是在减少文件大小，减少请求，优化JS，很少有人对css十分关注，甚至有人都不对css进行压缩。

其实，不规范的css会导致很多性能问题，这些问题可能在一些小的项目中不够明显，但是在大型项目中就会显现出来。

css匹配原理

在优化css之前我们需要了解下css是怎么进行工作的，我们都知道css是由选择器，属性和属性值构成的。

我们可能会这样写上一行代码

<span style="color: #000000;">//css
.con .loulan1 p span{ display: block; }

//html
</span><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulan"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>

在这里我们对con类里面的loulan类里的p标签里面的span标签进行样式定义。我说出来都嫌累更别说写起来了，其实你可以把浏览器看作一个人，它渲染起来肯定也会浪费性能。

而且css的匹配原理不是从左到右的，而是从右到左的，也就是说我们的这行代码里面，先查找到页面里面所有的span元素形成一个集合，再在所有的span元素往上查找，看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢寻找，把父元素不是p元素的删去，再往上查找看集合里的有p元素又多少它的父元素的类是loulan...浏览器说：我好累...

其实呢浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。并且Firefox 称这种查找方式为 keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的 key 就是 span。人家本来是为了能尽快过滤到一些无关样式规则的，我们这里缺一层套一层，层层不停歇。所以只是想定义一个span的样式在span上加个类岂不是更好。有人这时要说了，那样是需要在每个元素上都加上类吗？那肯定不是必须的，只不过我们要了解浏览器是怎么查找匹配的，然后结合现在的结构来做出一个最好的最方便的写法。

<span style="color: #000000;">//css
.loulanSpan{ display: block; }

//html
</span><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulan"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulanSpan"</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>

css选择器权值

这里说下CSS的 ID Class Tag选择器的权值，也就是他们的优先级，权值越大，优先级越高

ID:100

Class:10

Tag:1

 

有了上面两个的基础我们再详细说下应该怎样来优化css提高性能

 

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

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

3，建立公共样式类，把长段相同样式提取出来作为公共类使用，比如我们常用的清除浮动，单行超出显示省略号等等等，当然如果你使用sass，继承会让你更加方便，同时我是比较提倡使用sass的，之后肯定也会写一篇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压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十分好的)，GZIP压缩，Gzip是一种流行的文件压缩算法，详细做法可以谷歌或者百度。

 

当然css性能优化技术可能不仅仅是这些，欢迎朋友补充分享。