高性能的CSS
高性能的CSS：即代码文件加载更快，代码执行的速度更快，让页面尽快地展现在最终用户的面前。
1、使用高效地CSS选择器
能被浏览器快速解析和匹配的CSS选择器就是高效地选择器。
CSS选择器的匹配原理和我们习惯的匹配过程是相反的，它是从右到左进行匹配的。
高效的选择器意味着浏览器匹配选择器时更快速，匹配查找次数更少。
在定义选择器时，应该尽量让第一次匹配时的数量达到最少，并且让整体的匹配查找次数最少。
CSS选择器定义的最佳实践：
1）避免使用通配符：通配符使用*号表示，它用来匹配页面中所有的元素。它匹配的计算量非常大。
/*避免使用*/
* {
font-size: 16px;
}
2）避免使用标签选择器和单个属性选择器作为关键选择器：在一个选择符中，最右边的选择器是关键选择器。关键选择器决定着浏览器初始匹配的元素数量，它也是整个选择符整体匹配次数的最主要决定者。
/*避免使用*/
.references p.list div {
font-style: italic;
}
.references p.list [data-link="red"] {
color: #f00;
}
3）不要在ID选择器前使用标签名：在ID选择器前添加标签名是多余的。
/*避免使用*/
div#page_index {
color:#f00;
}
/*推荐使用*/
#page_index {
color:#f00;
4）尽量不要在选择符中定义过多的层级，最好不要超过三层：选择器的层级关系越深，浏览器顺着Dom数查找匹配选择器的次数就越多。
一个CSS选择器性能测试的实验网站：CSS selectors Test：http://stevesouders.com/efws/css-selectors/tests.php。该网站用于测试各种CSS选择器的开销。
也可以使用工具检测页面CSS选择器的效率，比如Chrome浏览器自带的开发工具。
CSS样式还是以可维护性为主，提升性能为辅，要在保证CSS样式的可维护性前提下来编写高性能的CSS选择器。
2、CSS相关的图片处理
1）不要设置图片的尺寸
利用样式缩放图片会带来CPU的额外计算过程，增加了图片在浏览器中的渲染时间。因此，在制作图片时，尽量按照实际需求的尺寸制作。缩略图和实际的图片不要使用相同的图片。最佳的做法是针对原始图片，单独做一套缩略图。
2）使用CSS“雪碧”图（CSS Sprite）技术
CSS Sprite技术，一般翻译为CSS精灵，或者CSS“雪碧”图。它可将零散的背景图合并为一张大图，再利用CSS的background-position进行背景定位。
CSS Sprite的优点：减少了网络请求的次数，提高了图片整体的加载速度；方便网站更换风格。
CSS Sprite的缺点：开发过程烦琐、维护过程复杂、使用不当，则会导致性能问题：内存消耗（合并后的图片可能会很大）。
使用CSS Sprite的一些最佳实践：
（1）在项目后期应用CSS Sprite技术
（2）合理组织“雪碧”图
在“雪碧”图中，组织背景主要是按照模块和背景图的风格来划分。按照模块划分的优点是方便代码维护，而按照风格划分则是方便背景图的维护以及网站整体风格的更改。
（3）控制“雪碧”图的尺寸和大小
推荐长度和宽度相乘不要超过2500。“雪碧”图的大小不要超过200KB。
（4）合理控制背景图单元之间的距离以及背景图的位置
此原则的目的是为了防止当背景图尺寸比实际应用的元素尺寸小时，背景中出现其他无关的背景图。
（5）借助工具
“雪碧”图最大的缺点是维护困难，但是借助于合适的工具，可降低维护的困难程度。
在线的CSS Sprite生成器：CSS Sprite Qenerator：http://spritegen.website-performance.org。用户通过上传一个包含多个背景图的压缩包，工具会自动生成由这些背景图组成的“雪碧”图。它允许用户设置背景图单元的水平和垂直偏移、指定透明度及背景色等。
Sprite Cow：http://www.spritecow.com。用户上传已有的“雪碧”图，并使用鼠标操作选中某个背景图单元，工具就会自动生成对应的CSS代码。
SpriteMe：www.spriteme.org。可通过分析网页，来产生“雪碧”图及对应的CSS代码。
3、减少CSS的代码量
1）定义简洁的CSS规则：主要是指合并相关规则和定义简洁的属性值。
2）合并相关CSS规则
CSS中的某些样式是由多个规则组成的，比如字体样式。
p.reader-title {
font-family: Georgia,serif;
font-size: 12px;
font-style: italic;
font-weight: bold;
line-height: 30px;
}
/*推荐使用，合并后的样式*/
p.reader-title {
font:italic bold 12px/30px Georgia,serif;
}
类似的样式还有background、border、margin、padding、text、list-style、transform、transition、animation等。
3）定义简洁的属性值
有些属性值可以使用更简洁的方式来展现，比如颜色和尺寸。
p.reader-title {
color: #ff33ff;
font-size: 0.8em;
padding:0em;
}
/*推荐使用，简洁的属性值*/
p.reader-title {
color: #f3f;
font-size: .8em;
padding: 0;
}
4）合并相同的定义
在CSS代码中，定义的规则会有相同的部分。可以合并这些相同的样式定义，达到代码重用和缩减代码的目的。
.library-title {
text-align: center;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
font-size: 1.2em;
line-height: 2em;
}
.search-title {
text-align: center;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
font-size: 1.4em;
line-height: 2.5em;
}
/*推荐使用，合并后的样式代码*/
.library-title, .search-title {
text-align: center;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
}
.library-title {
font-size: 1.2em;
line-height: 2em;
}
.search-title {
font-size: 1.4em;
line-height: 2.5em;
}
在CSS中，有些属性是可以继承的，比如color、font、line-height、list-style、text-align、text-index、text-transform等。如果某个父元素的多个子元素上设置了相同的可继承的属性定义，则可以把相同的定义合并，且设置在父元素上。
5）删除无效的定义
无效的定义包括无效的规则及无效的样式属性。
无效的规则一般是在开发过程中引入的，从直观上是无法判断某个规则是否已经失效。可以使用工具来进行查找，比如，用Chrome浏览器自带的开发工具就可以查找CSS代码中无效样式。
无效的样式属性指的是设置的样式并没有起作用。比如设置内边距为负值，以及一些因手误引起的属性值拼写错误。同样，使用Chrome浏览器自带的开发工具就可以检测无效的属性定义。
/*无效的样式属性*/
.invalid-css {
padding-top: -20px;
border: 1px soild #ddd; /*solid*/
}
4、其他CSS高性能实践
1）避免使用@import：有开发者详细分析了使用@import的缺点：http://www.stevesouders.com/blog/2009/04/09/dont-use-import。
2）避免使用IE浏览器独有的样式：图片滤镜和CSS表达式
图片滤镜的使用会在图片加载时阻塞浏览器的加载和渲染，并会增加额外的内存开销。
.image-title {
filter: opacity(30%);
}
CSS表达式的作用是动态设置CSS属性。使用CSS表达式不只是有兼容问题，还有性能问题。例如，在浏览器大小改变、窗口滚动时，会使得浏览器频繁计算，性能损耗极大。
<!--使用CSS表达式的例子-->
<div id="oDiv"
style="background-color: #cfcfcf;position: absolute;
left: expression(document.body.clientWidth/2-oDiv.offsetWidth/2);
top: expression(document.body.clientHight/2-oDiv.offsetHight/2)">
Example DIV
</div>
