白屏问题与FOUC

在讨论“白屏与FOUC”之前，我们先理清浏览器的加载原则：

• 浏览器对于图片和CSS，在加载时会并发加载；
• 浏览器对于JavaScript，在加载时会禁用并发，并且阻止其后的文件的加载及组件的下载。

接着我们还需要知道，不同浏览器的处理CSS和HTML的方式是不同的。

• 比如像IE、chrome，采用的是等CSS全部加载解析完后再渲染展示页面。
• firefox则是在CSS未加载前先展示html的内容，等CSS加载后重新对样式进行修改。

所以对于白屏的出现情况往往因为CSS样式被置于底部（最后加载）,当新窗口打开或者刷新的时候，页面会出现白屏。
如果使用 @import标签,它引用的文件则会等页面全部下载完毕再被加载，所以也可能出现白屏。

而当JavaScript被置于顶部时，会禁用并发，并且阻止其后的文件的加载及组件的下载，致使白屏的情况出现。

对于firefox浏览器，当CSS样式被置于底部，html会先呈现出来，待到html加载完毕，再一次性加载CSS样式使得样式突然呈现，就有了闪屏的现象。