YSLOW性能测试前端调优23大规则(5)将样式表放在顶部

CSS层叠样式表（Cascading Style Sheets）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

在研究前端性能时，我们是希望页面能逐步地加载的，也就是说我们希望浏览器能够尽快显示内容，而不是等到所有页面加载完成后才开始显示内容，这对于有很多内容的页面以及Internet连接慢的用户来说尤其重要。也即是为用户提供可视化的反馈的重要性，在可用性的概念中详细的阐述了从进度指示器的角度强调可视化反馈的重要性。

进度指示器有以下三个方面的优势：

第一：可以让用户知道系统没有崩溃，只是正在为他或她解决问题；

第二：它们指出了用户大概还需要等多久可以加载完成，以便用户能够在漫长的等待中做些其它的事情；

第三：能给用户提供一些可以看的东西，使用得等待不再是那么无聊。

当然在我们讨论前端性能时，HTML页面就是进度指示器，当浏览器逐步地加载页面时，页头、导航栏、顶部LOGO等，这些都会为等待页厕所用户提供视觉反馈，这样可以改善整体用户体验。

那么如果将样式放在文档底部是，就会禁止浏览器进行渐进式呈现，这样会浏览器会阻止渲染，这样用户会停留在空白页面，我们将其称之为“白屏”。为了避免“白屏”，应该将样式放在文档顶部的HEAD中，经过这样修改后的示例网站称之为“CSS at the Top”，这样不管页面是如何加载的，页面都会逐步呈现。