《高新能网站建设》（6）--将样式表放在顶部

将DHTML特征的样式表放在文档顶部（Head中）能使页面加载得更快(改善页面加载时间）。

逐步呈现

当浏览器逐步加载页面时，页头，导航栏，顶部logo等，这些为等待页面的用户提供了视觉反馈（这改善了整个用户体验）。

将样式表放在文档底部会导致在浏览器中阻止内容逐步呈现，将样式表放在文档顶部对于加载页面所需的实际时间没有太多的影响，影响更多的是浏览器对这些组件顺序的反应。

将CSS放在底部

将样式表放在文档底部延迟页面加载只发生在IE浏览器中，在IE浏览器中将样式表放在文档底部会导致白屏问题的情形有三种：在新窗口中打开时，重新加载时和作为主页时。

将CSS放在顶部

为了避免白屏可以将样式表放在文档顶部的Head中。

将样式表包含在文档中有两种方式：使用link标签和@import规则。

使用link标签：

使用@import规则的style标签：

一个style块可以包含多个@import规则，@import规则必须放在其他规则之前。

link标签相比@import会带来性能上的收益。

@import可能会带来白屏现象（即使是放在文档的Head标签中也一样），并且使用@import规则会导致组件下载时的无序性。

无样式内容的闪烁

无样式内容的闪烁：即FOUC（Flash of Unstyle Content)。样式表被（不正确地）放在了底部。当页面逐步加载时，文字首先显示，然后是图片。最后，在样式表正确地下载并解析之后，已经呈现的文字和图片要用新的样式重绘了，这就是“无样式内容的闪烁”。

白屏是对POUC问题的弥补（可以选择浏览器延迟呈现到所有样式表下载完后导致白屏或者浏览器逐步呈现但是要承担闪烁的风险）。