优化浏览器渲染
资源被下载到客户端后，浏览器仍需加载，解释，并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面，就可以提升客户端的性能
1.使用高效率的css选择器
2.避免css expressions
3.将样式表放在页面顶部
4.指定图像尺寸
5.尽在指定文档的字符编码
使用高效率的css选择器
概述：避免低效率的匹配大量元素的键选择器[key selectors]可以加快页面渲染。
详细信息
当浏览器解析HTML时首先构造一个内部文件树来代表所有显示的元素。然后浏览器根据标准的CSS级联、继承和排序规则，为元素指定匹配的各种样式。在Mozilla里的执行情况(可能在其他浏览器也是这样)，CSS搜索引擎通过样式规则为每个元素找到匹配的样式。该引擎由右至左评估每个规则，从最右边的选择器开始（称为“键”【Key】），并通过移动每个选择器，直到找到一个匹配或丢弃的规则。（“选择器”是应用规则的文档元素。）
基于此原则，引擎要评估的规则越少越好。所以提高渲染性能的重要一步就是删除未使用的CSS。在此之后，对包含大量的元素和/或CSS规则的页面来说，优化规则本身的定义就能够提高性能。优化规则的关键在于尽可能具体定义规则，并避免不必要的重复，让样式引擎快速找到匹配的规则,而不用花费时间查找不适用的规则。
下列各类规则被认为是低效的：
（1）后代选择器的规则
例如：通配选择器作为键的规则
body * {...}
.hide-scrollbars * {...}
标签选择器作为键的规则
ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...}
后代选择器是低效的，因为对于每个与键相匹配的元素，浏览器必须遍历DOM树，评估每一个祖先元素，直到找到一个匹配或到达根元素。键越不具体，需要进行评估的节点数量就越大。
（2）子代选择器和相邻选择器的规则
例如：通配选择器作为键的规则
body > * {...}
.hide-scrollbars > * {...}
标签选择器作为键的规则
ul > li > a {...}
#footer > h3 {...}
子代选择器和相邻选择器是低效的，因为对每个匹配的元素，浏览器必须评估另一个节点。这样导致规则中的每个子选择器加倍消耗。同样，键越不具体，需要进行评估的节点数量就越大。尽管如此，虽然同样效率低下，在性能方面相对后代选择器而言，它们仍然是可取的。
（3）有多余修饰的规则
例如：
ul#top_blue_nav {...}
form#UserLogin {...}
ID选择是唯一的定义。加上标签或类的限制只增加了多余的、引起不必要评估的信息。
（4）对非链接元素应用:hover伪选择器的规则
例如：
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa:hover {...}
非链接元素上的:hover伪选择器在某些情况下*会使IE 7 和IE 8 变慢。当页面没有一个严格的doctype时，IE 7 和IE 8 将忽略除了链接外的任何元素的:hover。当页面有严格的doctype，在非链接元素上的:hover将导致性能下降。
建议：
（1）避免通配选择器。
允许元素继承祖先的样式，或者使用一个类来给多个元素应用样式。
（2）使您的规则尽可能具体。
尽量使用class和ID选择器而非标签选择器。
（3）删除多余的修饰语。
这些修饰语是多余的:
ID选择器被class选择器和/或者标签选择器限制。
class选择器被标签选择器限制(当一个类只是用于一个标签，无论如何这都是一个很好的设计实践)。
（4）避免使用后代选择器，特别是那些指定多余祖先的。
例如，这一个规则 body ul li a {...} 指定了一个多余的body选择器, 因为所有的元素都是body标签的后代。
（5）使用class选择器代替后代选择器。
例如，如果您需要有序列表项和无序列表项有不同的两个样式，而不是使用两个规则:
ul li {color: blue;}
ol li {color: red;}
你可以将样式编码成两个类名并在规则中使用，例如：
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
如果您必须使用后代选择器，尽量使用子代选择器，这最少只需评估一个额外的节点，而非中间直至祖先的所有节点。
（6）在IE中避免对非链接元素应用:hover。
如果您对非链接元素应用:hover，请在IE7和IE8中测试并确保页面可用。如果您发现:hover导致性能问题，可以考虑条件性的为IE使用JavaScript onmouseover事件（只对IE写mouseover事件）。
避免css expressions
概述：css表达式会降低浏览器的渲染性能，用其他方案替换它们将会改善IE浏览器的渲染性能
详细信息
作为一种动态改变文档属性来响应各种事件的手段，IE5引入了css表达式或“动态属性”。它们由在css声明的css属性值里嵌入javascript表达式构成。在大多数情况下，它们用于以下目的：
模拟其他浏览器支持但IE浏览器尚未支持的标准css属性。
使用比编写全面JavaScript注入式样式更小巧，更便捷的方法，来提供动态样式和高级的事件处理。
不幸的是，CSS表达式对于性能的不良影响是相当大的，因为每当有事件触发，浏览器都要重新计算每个表达式，如一个窗口改变大小，鼠标移动等。CSS表达式的低性能表现是IE 8弃用它们的原因之一。如果你在网页里使用CSS表达式，应该尽一切努力来消除它们并且使用其他方法来达到同样的功能。
建议：
（1）尽可能使用标准的CSS属性
（2）使用JavaScript脚本样式。
如果你正在使用CSS表达式来实现动态样式，用纯JavaScript重写它们是很有意义的，因为这样既能提高IE性能，同时在其他浏览器获得相同效果的支持。
将样式放在页面头部
概述：将内联样式块和<link>元素从页面<body>移动到页面<head>中，这样能提高渲染性能。
详细信息：
在HTML文件<body>中指定外部样式表和内联样式块可能对浏览器的渲染性能产生不利影响。浏览器阻塞渲染网页直到所有外部的样式表都已被下载。（用<style>标记指定的）内联样式块可能会导致reflows和页面跳动。因此，把外部样式表和内联样式块放在页面的<head>中是很重要的。通过确保样式表首先被下载和解析，可以让浏览器逐步渲染页面
建议：
始终把使用<link>标签的外部样式表放在<head>部分里。不要使用@import。还要确保您指定的样式有正确的顺序。
把<style>区块放在<head>部分里。
指定图片尺寸
概述:为页面中所有图片指定宽度和高度可以消除不必要的reflows和重新绘制页面【repaints】，使页面渲染速度更快。
详细信息
当浏览器勾画页面时，它需要能够流动的，如图片这样的可替换的元素。提供了图片尺寸，浏览器知道去环绕附近的不可替换元素，甚至可以在图片下载之前开始渲染页面。如果没有指定的图片尺寸，或者如果指定的尺寸不符合图片的实际尺寸，一旦图片下载，浏览器将需要reflows和重新绘制页面。为了防止reflows，在HTML的<img>标签中或在CSS中为所有图片指定宽度和高度。
建议:
(1)指定与图片本身相一致的尺寸
不要使用非图片原始尺寸来缩放图片。如果一个图片文件实际上的大小是60×60像素，不要在HTML或CSS里设置尺寸为30×30像素。
(2)一定要指定图片或它的块级父元素的尺寸
一定要设置<img>元素本身，或它的块级父元素的尺寸。如果父元素不是块级元素，尺寸将被忽略。不要在一个非最近父元素的祖先元素上设置尺寸。
注：浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的进程叫做reflow
尽早指定文档的字符编码
概述:为HTML文档尽早指定字符编码，可以让浏览器立刻开始执行脚本。
详细信息：
HTML文档是作为带有字符编码信息的字节流序列在互联网中传送的。字符编码信息可以在随文档发送的HTTP响应头信息中指定，也可以在文档的HTML标签中指定。浏览器根据字符编码信息将字节流转换为显示在浏览器上的字符。如果不知道如何构造一个页面的字符，浏览器自然也不能正确地渲染页面。绝大部分浏览器在开始执行任何JavaScript代码或者绘制页面之前都要缓冲一定数量的字节流，缓冲的同时它们也要查找相关的字符编码设定（一个值得注意的例外是IE6/7/8）。
不同浏览器需要缓冲的字节流数量不同，另外如果找不到编码设定，各浏览器默认的编码也不同。但是不管哪一种浏览器，如果在已经缓冲了足够的字节流、开始渲染页面之后才发现指定的编码设定与其默认值不同，都会导致重新解析文档并重绘页面。如果编码的变化影响到了外部资源（例如css\js\media），浏览器甚至会重新对资源进行请求。
为了避免这些延迟，对任何超过1k（精确地说是1024字节，这是我们测试过的所有浏览器的最大缓冲限制）的HTML文档，要尽早指定字符编码。
建议
(1)通过HTTP头信息或meta标签指定编码
- 为HTML文档指定编码设定有几种方式：
- 服务器端：通过web服务器的配置来指定编码参数，为所有text/html类型的文档指定带有正确编码信息的Content-Type头信息。例如 Content-Type: text/html;charset=UTF-8
- 客户端：在HTML代码中包含http-equiv="content-type"的meta标签，并指定字符编码。例如。
如果可能的话，为你的web服务器做指定字符编码的HTTP头信息配置。某些浏览器（例如Firefox）在执行JavaScript之前会用（比其它浏览器）更短的延迟缓冲来检查头信息中是否指定字符编码。这意味着它们可以跳过对HTML标签的检查，缩短缓冲的字节数和延迟时间。
(2)把meta标签放在head区域的最前面
如果你不能对web服务器配置进行修改，又需要通过meta标签指定编码，要确保你用于指定编码的meta标签是文档中head标签的第一个子元素。浏览器会在文档的前1024字节中寻找字符编码参数，因此为了避免性能损耗，编码参数在文档头部越早出现越好（译注：在IE6以下的版本中，特定情况下，如果该meta标签不是head的第一个子元素，则会被忽略。具体触发情况尚未进行仔细测试，初步估计是与web服务器配置的默认编码或浏览器默认编码有关）。
(3)始终指定文档类型
在浏览器开始检查字符编码设定前，它们必须先检测将被处理的文档是什么类型。如果没有在头信息或meta标签中指定文档类型（content-type），浏览器就会通过很复杂的算法去“嗅探”文档的类型。这个过程会造成额外的延迟，而且还会带来安全漏洞。
(4)务必指定正确的字符编码
你在HTTP头信息或meta标签中指定的字符编码设置一定要和编辑HTML文档时的实际字符编码一致，这非常重要。另外，如果同时通过HTTP头信息和Meta标签两种方式指定了字符编码，它们一定要保持一致。否则浏览器发现两者相互矛盾，会造成页面渲染错误或者为了重绘页面而造成额外的延迟。
资料来源：http://www.99css.com/archives/275#UseEfficientCSSSelectors
http://www.ofcss.com/2011/03/14/browser-rendering-optimizer-translation-extra.html
浙公网安备 33010602011771号