高性能web网站优化原则5——把css放在页面顶部

渐进式渲染
html页面渲染是一个渐进式的过程。当浏览器加载页面时，先是头部，导航条，logo等，这给等待页面的客户一个良好的反馈，提高了用户体验度。
如果把css放在底部，这种行为在大部分浏览器中会阻止页面的渐进式渲染，当元素的样式改变时以避免浏览器元素的重绘。浏览器将会等待css文件一直到下载完成为止，在这段时间内，用户看到的页面是空白的。然后css下载完成后，页面被渲染出来展现给用户。这种现象叫做“白屏”

将css文件用link标签放在文档头部可以避免这种问题
<link rel="stylesheet" href="styles1.css">
有的浏览器中，用下面的css引入方式也会导致白屏问题，所以建议用link标签的方式导入。
<style>
@import url("styles2.css");
</style>

如图下面是放在底部跟顶部的加载顺序及时间

[img]http://dl2.iteye.com/upload/attachment/0109/6985/b76ca27b-4c20-3f62-a6f7-20e9d852f99c.png[/img]