白屏问题与FOUC无样式内容闪烁

• 白屏（blank white screen)：在浏览器和用户等待位于底部的样式表时，浏览器会延迟显示任何可视化组件，即所谓的白屏现象。

• 无样式内容闪烁（FOUC）：页面在样式表下载解析之前，组件就已经逐步加载显示，当样式表解析完成后，已经显示的组件就要用新的样式进行绘制，这就导致所 谓的无样式内容闪烁。

不同的浏览器对于CSS和HTML的处理方式不同，有的是等待CSS加载完成之后，对HTML元素进行渲染和展示（这样就容易出现白屏问题）。有的是先对HTML元素进行展示，然后等待CSS加载完成之后重新对样式进行修改（容易产生FOUC无样式内容闪烁），而在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载。

如果我们把CSS样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏，如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。

如果把js文件放在头部，脚本会阻塞后面内容的呈现，脚本会阻塞其后组件的下载，这也会出现白屏问题。

所以为了避免白屏现象和FOUC，一般将样式表置于顶部标签之间，虽然加载时间略微变长。如果样式表最初页面内容呈现无关，则可以采取文档加载完毕后再动态加载的方式进行加载。而对于js，则将js文件的引入位置放在底部的前面。