CSS优化

1：避免使用@import，外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟。
     一个CSS文件a.css包含了以下内容：@import url(“b.css”)。浏览器先把a.css下载、解析和执行后，发现及处理第二个文件b.css。简单的 解决方法是使用<link>标记来替代@import，并行下载CSS文件，从而加快页面加载速度。

2：避免AlphaImageLoader滤镜，IE独有属性，用于修正7.0以下版本中显示PNG图片的半透明效果。

     浏览器加载图片时它会终止内容的呈现并且冻结浏览器，在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支。
     解决方案：1)：PNG8格式来代替，这种格式能在IE中很好地工作。
                       2)：确实需要使用AlphaImageLoader，使用下划线_filter，使IE7以上版本的用户无效。

3：避免CSS表达式。
     例：background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );
     CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。
     在页面显示和缩放、滚动、移动鼠标时都会要 重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中要计算成千上万次并且可能会对页面的性能产生影 响。

4：避免通配选择器
     例：#main > a {color: red;}
         CSS选择器是从右到左进行规则匹配。所以在浏览器中这条语句实现为：
         浏览器遍历页面中所有的a元素——>其父元素的id是否为main。
     例：#main  a {color: red;}
         这个例子比上一个消耗的时间更多
         遍历页面中所有a元素——>向其上级遍历直到根节点
     例：.test * {color: red;}
         匹配文档中所有的元素——>分别向上逐级匹配class为test的元素，直到文档的根节点
         所以我们应该避免使用通配选择器。
 

5：移除无匹配的样式
     一：删除无用的样式后可以缩减样式文件的体积，加快资源下载速度；
     二：对于浏览器而言，所有的样式规则的都会被解析后索引起来，即使是当前页面无匹配的规则。移除无匹配的规则，减少索引项，加快浏览器查找速度；

6：避免单规则的属性选择器
     浏览器匹配所有的元素——>检查是否有href属性并且herf属性值等于”#index”——>分别向上逐级匹配class为selected的元素，直到文档的根节点。

7：避免类正则的属性选择器
     正则表达式匹配会比基于类别的匹配会慢很多。大部分情况下我们应尽量避免使用 *=， |=， ^=， $=， 和 ~=语法的属性选择器。

Tips：

    !important的样式直接覆盖了正常生成的样式规则，然后如果解析到后面还有!important规则时，再和以前的important规则比较优先级。就是说，使用!important的CSS规则是为了最高优先级，然后最高优先级中去判断应用那个样式。    对于性能并没有什么负面影响，但是从可维护性角度考虑还是少用这个规则。