测试模拟 白屏 / FOUC

白屏和FOUC

白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的。

我们可以通过一个实验来进行测试和模拟白屏、FOUC的现象，让我们更好的理解白屏、FOUC。

测试demo

https://github.com/evenyao/whitescreen-fouc-test
步骤README.md中已经大概有了，下面整合一些截图，方便理解。

具体分析

白屏测试 / 且js放在css之后

HTML

 

CSS加载完成后样式就出现了，js未加载完成，但并不影响样式显现 

 

 

FOUC测试 （使用FireFox浏览器）

HTML优先被加载出来了，但我们没有看到任何样式呈现

 

加载完成之后，我们看到了样式，即出现了FOUC

 

 

其他

白屏测试 / 且js放在CSS之前

HTML

 

 

可以看到CSS已经加载完成，但因为js并未加载完成，产生了堵塞，从而导致了样式没有展现

 

 

直到js也全部加载完成之后，样式才得以出现 

 

这个时候我们来测试一下 async

白屏测试 / 且js放在css之后 但加了async异步

HTML

 

可以看到即使js放在前面，且没有加载完成，样式还是成功显现了

 

测试async异步效果成功

 

defer也是同理，同时也更好的理解了异步加载。
关于白屏、FOUC和异步加载的概念，参考之前写的初涉 JavaScript