先看这个：浏览器的渲染原理
ISD Webteam的大布同学（twitter：@tc_bryanzhang）牺牲了自己大量的xx时间翻译了Page
Speed系列中的Optimize
browser rendering，以下是翻译全文：
优化浏览器渲染
资源被下载到客户端后，浏览器仍需加载，解释，并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面，就可以提升客户端的性能。
1、使用高效率的CSS选择器
概述
避免低效率的匹配大量元素的键选择器【key selectors】可以加快页面渲染。
详细信息
当浏览器解析HTML时首先构造一个内部文件树来代表所有显示的元素。然后浏览器根据标准的CSS级联、继承和排序规则，为元素指定匹配的各种样式。在Mozilla里的执行情况(可能在其他浏览器也是这样)，CSS搜索引擎通过样式规则为每个元素找到匹配的样式。该引擎由右至左评估每个规则，从最右边的选择器开始（称为“键”【Key】），并通过移动每个选择器，直到找到一个匹配或丢弃的规则。（“选择器”是应用规则的文档元素。）
基于此原则，引擎要评估的规则越少越好。所以提高渲染性能的重要一步就是删除未使用的CSS。在此之后，对包含大量的元素和/或CSS规则的页面来说，优化规则本身的定义就能够提高性能。优化规则的关键在于尽可能具体定义规则，并避免不必要的重复，让样式引擎快速找到匹配的规则,而不用花费时间查找不适用的规则。
下列各类规则被认为是低效的：
后代选择器的规则
例如：
通配选择器作为键的规则
body * {...}
.hide-scrollbars * {...}
标签选择器作为键的规则
ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...}
后代选择器是低效的，因为对于每个与键相匹配的元素，浏览器必须遍历DOM树，评估每一个祖先元素，直到找到一个匹配或到达根元素。键越不具体，需要进行评估的节点数量就越大。
子代选择器和相邻选择器的规则
例如：
通配选择器作为键的规则
body > * {...}
.hide-scrollbars > * {...}
标签选择器作为键的规则
ul > li > a {...}
#footer > h3 {...}
子代选择器和相邻选择器是低效的，因为对每个匹配的元素，浏览器必须评估另一个节点。这样导致规则中的每个子选择器加倍消耗。同样，键越不具体，需要进行评估的节点数量就越大。尽管如此，虽然同样效率低下，在性能方面相对后代选择器而言，它们仍然是可取的。
有多余修饰的规则
例如：
ul#top_blue_nav {...}
form#UserLogin {...}
ID选择是唯一的定义。加上标签或类的限制只增加了多余的、引起不必要评估的信息。
对非链接元素应用:hover伪选择器的规则
例如：
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa:hover {...}
非链接元素上的:hover伪选择器在某些情况下*会使IE 7 和IE 8 变慢。当页面没有一个严格的doctype时，IE 7 和IE 8 将忽略除了链接外的任何元素的:hover。当页面有严格的doctype，在非链接元素上的:hover将导致性能下降。
*查看bug报告http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=391387。
建议
避免通配选择器。
允许元素继承祖先的样式，或者使用一个类来给多个元素应用样式。
使您的规则尽可能具体。
尽量使用class和ID选择器而非标签选择器。
删除多余的修饰语。
这些修饰语是多余的:
ID选择器被class选择器和/或者标签选择器限制。
class选择器被标签选择器限制(当一个类只是用于一个标签，无论如何这都是一个很好的设计实践)。
避免使用后代选择器，特别是那些指定多余祖先的。
例如，这一个规则 body 指定了一个多余的body选择器, 因为所有的元素都是body标签的后代。
ul li a {...}
使用class选择器代替后代选择器。
例如，如果您需要有序列表项和无序列表项有不同的两个样式，而不是使用两个规则:
ul li {color: blue;}
ol li {color: red;}
你可以将样式编码成两个类名并在规则中使用，例如：
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
如果您必须使用后代选择器，尽量使用子代选择器，这最少只需评估一个额外的节点，而非中间直至祖先的所有节点。
在IE中避免对非链接元素应用:hover。
如果您对非链接元素应用:hover，请在IE7和IE8中测试并确保页面可用。如果您发现:hover导致性能问题，可以考虑条件性的为IE使用JavaScript onmouseover事件（只对IE写mouseover事件）。
附加资源
更多关于Mozilla里的高效CSS规则的细节，请看https://developer.mozilla.org/en/Writing_Efficient_CSS。
有关CSS的完整信息，请看Cascading
Style Sheets Level 2 Revision 1 (CSS 2.1) Specification。有关CSS选择器的资料，请看Chapter
5。
2、避免CSS
expressions
概述
CSS表达式会降低浏览器的渲染性能；用其他方案替换它们将会改善IE浏览器的渲染性能。
注意：本节最佳实践只适用于Internet
Explorer 5到7，它们支持CSS表达式。Internet Explorer 8放弃使用CSS表达式，而其他浏览器是不支持的。
详细信息
作为一种动态改变文档属性来响应各种事件的的手段，Internet Explorer 5引入了CSS表达式或 “动态属性”。它们由在CSS声明中的CSS属性值里嵌入JavaScript表达式构成。在大多数情况下，它们用于以下目的：
模拟其他浏览器支持但IE浏览器尚未支持的标准CSS属性。
使用比编写全面JavaScript注入式样式更小巧，更便捷的方法，来提供动态样式和高级的事件处理。
不幸的是，CSS表达式对于性能的不良影响是相当大的，因为每当有事件触发，浏览器都要重新计算每个表达式，如一个窗口改变大小，鼠标移动等。CSS表达式的低性能表现是IE 8弃用它们的原因之一。如果你在网页里使用CSS表达式，应该尽一切努力来消除它们并且使用其他方法来达到同样的功能。
建议
尽可能使用标准的CSS属性。
IE 8已高度兼容标准CSS；IE 8只有在“兼容”模式才支持运行CSS表达式，而在“标准”模式下则不支持。如果你不需要向后兼容旧版本的IE，你应该转换成标准的CSS属性来替换所有对应的CSS表达式。如需CSS属性和支持它们的IE版本的完整列表，请参见MSDN的CSS属性索引。如果你确实需要支持所需CSS属性不可用的旧版本IE浏览器，请使用JavaScript来实现等效的功能。