规则 5——将样式表放在顶部

我们发现将 DHTML 特征的样式表放在文档顶部——head 中——能使页面加载得更快。

逐步呈现

关心性能的前端工程师都希望页面能逐步地加载，为用户提供可视化的反馈是很重要的。

将样式表放在文档底部，浏览器为避免当样式变化时重绘页面中的元素，浏览器会阻塞内容逐步呈现。浏览器延迟显示任何可视化组件，就会出现“白屏“。

将 CSS 放在底部

在 Internet Explorer 中，将样式表放在文档底部会导致白屏的问题情形如下：
1. 在新窗口中打开时
2. 单击刷新按钮，在页面加载时最小化然后恢复窗口就能看到白屏。
3. 设置为主页打开新的浏览器窗口时

将 CSS 放在顶部

若将样式表放在文档顶部的 HEAD 中，页面都是逐步呈现的

关于 Link 标签和 @import 规则

<link rel="stylesheet" href="styles1.css">

<style>
@import url("styles2.css");
</style>

一个 style 块可以包含多个 @import 规则，但必须放在所以其他规则之前。同时 @import 规则有可能会导致白屏，即使是放在 HEAD 标签中。使用 @import 有时会导致组件下载的无序性。

无样式内容的闪烁

白屏现象源自于浏览器的行为。如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前显示内容会遇到 FOUC(无样式内容的闪烁，Flash of Unstyled Content) 问题

白屏是对 FOUC 问题的弥补。

IE 在前面介绍的情形中会选择白屏，在单击链接、使用书签或键入 URL 会选择第二种方式——承担 FOUC 风险。

规则 6——将脚本放在底部

脚本带来的问题

脚本会阻塞并行下载。

并行下载

HTTP1.1 规范，建议浏览器从每个主机名并行下载两个组件。当然这个在浏览器上是可以重新配置的。使用 CNAME（DNS 别名）可以将组件放在多个主机中。增加并行下载并非没有开销，取决于带宽、CPU 速度，过多的并行下载反而会降低性能。

脚本阻塞下载

在下载脚本时并行下载实际是被禁用的，其中一个原因是脚本可能会使用 document.write 来修改页面内容，因此浏览器会等待，以确保页面能够恰当的布局。

另一个重要的原因是保证脚本能够按照正确的顺序执行。

最差情况：将脚本放在顶部

影响：

1. 脚本会阻塞对其后面内容的呈现
2. 脚本会阻塞对其后面组件的下载

正确地放置

在很多情况下，很难将脚本移到底部。例如，如果脚本使用 document.write 向页面中插入了内容，就不能将其移动到页面中靠后的位置。此外还会有作用域问题。很多情况下，可以用其他方法解决这些情形。

经常出行的另外一种建议是使用 Defferred 脚本。DEFER 属性表明脚本不包含 document.write, 浏览器得到这一线索可以继续呈现。但是在 firefox 中即使是延迟脚本也会产生阻塞。如果一个脚本可以延迟，那么它一定可以移到页面底部，这是最佳方式。

参考

1. 《高性能网站建设指南》