样式表和脚本在网页代码中的放置位置

为了用户体验，阅读器尽量快地显示内容，所以我们能看到比拟大的网站的页面是逐渐加载的。逐渐加载的益处是，在加载进程中，它让用户知道系统没有解体，并通知用户大约还要等多久，最后一点，它能给用户提供一些可以看的东西。

文档头部的样式表没加载完成时，会阻碍阅读器对内容的逐渐出现。由于当样式表没加载完时阅读器为了防止以后重新绘制页面中的元素，会中止内容的逐渐出现。

做个实验。在网页的头部用 <link>  标签加载一个样式表，样式表的地址是个 php 脚本，脚本中正常输入样式表内容前，调用 PHP 的 sleep()  函数，睡个几秒。刷新网页看效果，在样式表没加载好之前，网页不时是白屏。

白屏是一种十分不好的用户体验。假设将样式表放在网页底部，在 IE 较低版本中的一些状况下（新窗口下翻开、重新加载、作为主页时被翻开）就会形成白屏。白屏只是 IE 阅读器的行为，其他阅读器没这么处置。

那么，将样式表放在网页底部，在其他阅读器下、IE 的其他状况下的表现是怎样的？阅读器会选择逐渐出现内容，但是会出现 FOUC（Flash Of Unstyled Content，无样式内容的闪烁） 的效果。

当页面逐渐加载时，文字首先显示，然后是图片。最后样式表正确地下载并解析时，曾经出现的文字和图片要用新的样式重绘了。页面在重绘时，颜色、大小等都能够发作变化，看上去就像在闪烁一样，体验也相当不好。下面那个实验，只需把 <link>  标签挪到页面底部就能看到效果。

白屏 和 FOUC 只是阅读器在尝试修复前端工程师所犯错误（将样式表放在文档比拟靠后的位置）所做的处置方式的选择。选择 FOUC，在假设闪烁不严重，那用户体验就不会怎样差；选择白屏，基本没有取得好的体验的时机。

防止以上效果的方法就是：将样式表放在网页顶部加载，这些细节都是网页设计时，值得思索的。

下面是脚本的效果。

网页文档下载完成后，紧接着就末尾下载网页中的组件了（图片、样式表文件、脚本），为了更快的显示网页内容，阅读器会并行下载这些组件。但是下载脚本时，并行下载是被禁用的，也就是说，下载脚本时，阅读器不会启动其他的下载。其中一个缘由是，脚本能够运用 document.write  来修正页面的内容，因此阅读器会等候，以确保页面能正确的规划。

将脚本放在页面顶部，会有两种影响：脚本会阻塞它前面内容的出现，脚本会阻塞它前面组件的下载。修正下面的实验，将加载样式表的中央改成加载脚本，假设脚本在顶部，页面就会出现白屏，而且其他组件还没末尾下载。

所以，将脚本放在底部加载，即使央求时间较长，对页面的影响也很小。体验最佳。