优化浏览器渲染（CSS）
一旦资源被下载到客户端，浏览器仍然需要加载、解释和渲染HTML/CSS/JavaScript代码。你可以利用目前的浏览器的特点，通过整理你的代码来提高你的页面在客户端上的性能。
- 使用高效的CSS选择器
- 避免使用CSS表达式
- 把CSS文件放在文档的头部
- 指定图像的尺寸
- 指定字符集（Specify a character set）
使用高效的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事件去处理。
附：只翻译了一部分，给自己当笔记用的，觉得不好，可以看E文的。原站地址：https://developers.google.com/speed/docs/best-practices/rendering?hl=zh-CN
