在讨论“白屏与FOUC”之前,我们先理清浏览器的加载原则:
- 浏览器对于图片和CSS,在加载时会并发加载;
- 浏览器对于JavaScript,在加载时会禁用并发,并且阻止其后的文件的加载及组件的下载。
接着我们还需要知道,不同浏览器的处理CSS和HTML的方式是不同的。
- 比如像IE、chrome,采用的是等CSS全部加载解析完后再渲染展示页面。
- firefox则是在CSS未加载前先展示html的内容,等CSS加载后重新对样式进行修改。
所以对于白屏的出现情况往往因为CSS样式被置于底部(最后加载),当新窗口打开或者刷新的时候,页面会出现白屏。
如果使用 @import标签,它引用的文件则会等页面全部下载完毕再被加载,所以也可能出现白屏。
而当JavaScript被置于顶部时,会禁用并发,并且阻止其后的文件的加载及组件的下载,致使白屏的情况出现。
对于firefox浏览器,当CSS样式被置于底部,html会先呈现出来,待到html加载完毕,再一次性加载CSS样式使得样式突然呈现,就有了闪屏的现象。