css优化浏览器渲染，做到如下几点：
1、使用高效的CSS选择器
2、避免使用CSS表达式
3、把CSS文件放在文档的头部
4、指定图像的尺寸
5、指定字符集（Specify a character set）
6、使用高效的CSS选择器
概观：
避免使用需要匹配大量元素的低效率的关键选择器，可以加快页面的渲染。
细节：
浏览器通过构建一个内部文档树去解析HTML。然后它根据标准的CSS级联，继承和排序规则去匹配元素在不同的样式表中指定的样式。在Mozilla上的实现（也有可能是其他原因），CSS引擎都是通过样式规则去匹配每个元素。引擎是从最右边的选择器开始从右到左逐个去寻找，直到找到一个匹配项或丢弃该规则。
根据该原理，引擎需要匹配的规则是越少越好。当然，删除未使用的CSS也是提高渲染性能的一个重要步骤。包含大量元素或大量CSS规则的页面，采用优化规则定义的网页本身也能增强性能。优化规则的关键在于尽可能具体地定义规则，避免不必要的冗余，以至于样式引擎可以不必通过匹配不必要的规则来快速渲染。
以下类别的规则被认为是低效的：
与后代选择器规则
1)带通用选择器的规则
body * {...}
.hide-scrollbars * {...}
2)带标签选择器的规则
ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...}
后代选择器是低效的，因为浏览器中的每个元素的匹配都必须遍历DOM树，评估每一个祖先元素，直到找到一个匹配或到达根元素。不特定的键的数量越多，需要进行评估的节点就越多。
与子集或相邻选择器规则
1）与通用选择器的规则
body > * {...}
.hide-scrollbars > * {...}
2）带标签选择器的规则
ul > li > a {...}
#footer > h3 {...}
子集或相邻选择器是低效的，因为对于每一个匹配的元素，浏览器不得不去评估另一个节点。对于每个子选择器变得相当于做了两倍的功。同样，不确定的键的数量越多，需要评估的节点就越多。然而，低效的同时，仍然在性能上更优。
规则过于合格选择器
eg.
ul#top_blue_nav {...}
form#UserLogin {...}
ID选择器是唯一的定义。包括标签或者class前导只是增加了不需要评估的冗余信息。
非链接元素使用伪类的规则
eg.
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa :hover {...}
非链接元素上使用:hover伪类选择器，某些情况下导致在IE7和IE8运行缓慢。不使用严格的doctype声明的话，IE7和IE8会忽略在非链接元素上使用伪类这个问题。当使用严格的doctype的话，在非链接元素上使用伪类的话，会导致性能下降。
建议：
避免使用通用选择器
允许元素继承祖先元素或给多个元素使用一个类。
尽可能地让你的规则更详细
比起标签选择器，更建议使用class或者id选择器。
删除冗余前导
以下限定词是多余的：
1）给id加上标签选择器或者class做前导
2）给class加上标签选择器做前导（无论如何，给一个标签添加一个class是不错的设计）
避免使用后代选择器，尤其是那些指定冗余的标签
例如，规则 body ul li a {...}就指定了一个冗余的body标签，因为下级的所有的元素都是body的娃。
使用类选择器代替后代选择器
eg.如果你需要给一个有序列表，一个无序列表使用不同的样式，你也许会这么做：
ul li {color: blue;}
ol li {color: red;}
其实我们建议你使用两个类去定义：
eg.
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
如果你必须使用后代选择器或者喜欢用子选择器，那至少使用一个额外的节点，而非冷不丁地来几个标签选择器。
避免在IE浏览器下给非链接元素添加伪类选择器
或者你可以自己在IE7和IE8环境下测试一下鼠标悬停是否可用，如果发现悬停会导致性能问题，那建议使用javascript的onmouseover事件去处理。
原文参考：https://developers.google.com/speed/docs/best-practices/rendering?hl=zh-CN