构建高性能网站的14条法则：Put Stylesheets at the Top

在 Yahoo!，有一个小组在他们的项目中使用了一些DHTML特性。其中一个复杂的功能是是在发送邮件时会弹出一个DIV层。其实这个层并不影响其所在页面的渲染，因为它是功能触发式的被渲染的页面部分，所以这个小组的前端工程师就把这个弹出层的CSS样式写到一个独立的样式表文件中，并把对该CSS的引用放在页面的最下方的位置，以确保页面能较快的下载和渲染。
　　我们知一个页面是由图片，样式表，scripts等组件渲染成的，而组件是按它们在页面中出现的顺序依次下载，把DHTML的动态功能的样式表文件放到后面，可以让更关健的组件先下载，这样能使页面更快的渲染显示给浏览者，好像事实应该是这样，不是吗。

事实是这样吗？

　　其实采用上面的方式在IE下反而会更慢。经过不断尝试，我们还是把这个DHTML所需的样式表放到了页面的上方HEAD中，这时的页面载入是最快的。这好像和我们所期望的有点相反，为什么我们把暂不渲染页面的CSS放到页面的上方位置，延缓了其它关健组件的下载，反而是加快了页面的载入速度呢？这就是我们马上要开始介绍的法则5。

Progressive Rendering
逐步渲染

　　前端工程师总是希望他的页面能尽可能快的展示给用户，所以他们希望页面能够随着下载逐步渲染给用户，特别是在页面比较大或是用户使用较慢的网络连接时。有人曾经讨论过给用户一个视觉反馈的重要性，提出要用视觉反馈来作为衡量进度的指标：让用户实实在在的感受到页面一块一块的渲染出来和让用户等着一个空白页让各组件下载到本地再渲染，可能前一种方法的实际组件下载完的速度要慢，但用户会觉得这要快的多。

　　把样式表放到页面的下方，在一些浏览器中（包括IE）会阻止我们上面所期望的逐步渲染。因为浏览器如果发现页面中的下方有样式表的引用，就会不进行逐步的渲染以避免样式表的的变更所带来的重新渲染，所以这个时候用户可能会看到一个空白页（其实可能网速并不慢，服务响应也够快，但您还是等一个空白页的过程）。Firefox则不会这样。

　　在HTML规范中就清楚的说明了样式表要声明或引用在页面的HEAD中："Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times."

　　下面我们用数据来分析：
　　CSS在页面的下方：http://stevesouders.com/hpws/css-bottom.php
　　CSS在HEAD中：http://stevesouders.com/hpws/css-top.php
　　CSS在HEAD中，并用 @import的方式引入：http://stevesouders.com/hpws/css-top-import.php
（注意，这种用@import引入的方式，即使您将css写在HEAD中，也会出现类似将css放在页面下方的情况，出现一个空白的页等待中）
　　以上的三个页面中，组件和个数都一样。看看下面的三个页面的组件下载时序图：

　　第一个和第三个，都是在最后才下载样式表，这样就会导致在IE中，页面在6.3秒前都是不会被渲染的，而第二个页面，会最先下载样式表，这时页面就会开始渲染了。
　　
　　现在我们知道该怎么做了。把样式表以link文件的形式放进HEAD吧。 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/FrankTaylor/archive/2008/12/30/3657390.aspx