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

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

逐步呈现

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

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

将CSS放在底部

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

将CSS放在顶部

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

关于Link标签和@import规则

1

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

1
2
3

<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中即使是延迟脚本也会产生阻塞。如果一个脚本可以延迟，那么它一定可以移到页面底部，这是最佳方式。