《高性能网站建设指南》规则五、6—将样式表放在顶部、将脚本放在底部

规则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. 《高性能网站建设指南》