《四》将样式表放在顶部、将脚本放在底部

将样式表放在顶部：

关心性能的前端工程师都希望页面能逐步地加载呈现。当浏览器逐步地加载页面中的页头、导航栏、顶端 logo 时，所有这些都会为等待页面的用户提供视觉反馈，这改善了用户整体体验。

组件通常是按照它们在文档中出现的顺序下载的。将样式表放在文档底部会导致在浏览器中阻止内容逐步呈现，为避免当样式表变化时重绘页面中的元素，浏览器会阻塞内容逐步呈现，在浏览器和用户等待位于底部的样式表时，浏览器会延迟显示任何可视化组件，直到所有的样式表下载完成，可能会导致出现无样式内容的闪烁或白屏现象。

样式表在页面中的位置并不影响下载时间，但是会影响页面的呈现。浏览器为什么会这样做呢？原因是：如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前无需绘制任何东西，否则，在其准备好之前显示内容会遇到 FOCU 问题（无样式内容的闪烁，Flash of Unstyled Content）。
什么是无样式内容的闪烁呢？例如：当页面逐步加载时，文字首先显示，然后是图片，最后在样式表正确地下载并解析之后，已经呈现的文字和图片要用心的样式重绘了，这就是无样式内容的闪烁。
白屏现象源自于浏览器的行为。白屏是对 FOUC 问题的弥补，浏览器可以延迟呈现，直到所有的样式表都下载完之后，这就导致了白屏。
不同浏览器面对不同情况的选择可能是不一致的，可能会选择无样式内容的闪烁，也可能会选择白屏。

将样式表放在顶部 HEAD 中对于加载页面所需的实际时间没有太多影响，它影响更多的是浏览器对这些组件顺序的反应。

尽量使用 LINK 标签而不是 @inport 规则，因为使用 @import 规则会导致组件下载的无序性，即使将样式表放在了文档顶部的 HEAD 中，也不一定是最先下载的。

将脚本放在底部：

在下载脚本时浏览器会阻塞并行下载，即使使用了不同的主机名，浏览器也不会启动其他的下载。其中一个原因是，脚本可能使用 document.write 来修改页面内容，因此浏览器会等待，以确保页面能够恰当的布局；另一个原因是为了保证脚本能够按照正确的顺序执行，如果并行下载多个脚本，就无法保证响应是按照特定顺序到达浏览器的（例如：后面的脚本比页面中之前出现的脚本更小，它可能首先执行，如果它们之间存在着依赖关系，不按顺序执行就会导致 JS 错误）。

至此，脚本对 Web页面的影响就清楚了：脚本会阻塞对其后面内容的呈现、脚本会阻塞对其后面组件的下载。如果将脚本防在页面顶部，页面中的所有东西都位于脚本之后，整个页面的呈现和下载都会被阻塞，直到脚本加载完毕。

因此，放置脚本最好的地方是页面的底部。

如果脚本使用 document.write 向页面中插入了内容，就不能将其移动到页面中靠后的位置。