白屏和FOUC
白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的。
我们可以通过一个实验来进行测试和模拟白屏、FOUC的现象,让我们更好的理解白屏、FOUC。
测试demo
https://github.com/evenyao/whitescreen-fouc-test
步骤README.md中已经大概有了,下面整合一些截图,方便理解。
具体分析
白屏测试 / 且js放在css之后
HTML
![](https://upload-images.jianshu.io/upload_images/12904618-474a60be4ba2d510.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/410)
CSS加载完成后样式就出现了,js未加载完成,但并不影响样式显现
![](https://upload-images.jianshu.io/upload_images/12904618-66611e67b2961a8b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
FOUC测试 (使用FireFox浏览器)
HTML优先被加载出来了,但我们没有看到任何样式呈现
![](https://upload-images.jianshu.io/upload_images/12904618-fd2794cbc6ebe4dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
加载完成之后,我们看到了样式,即出现了FOUC
![](https://upload-images.jianshu.io/upload_images/12904618-6177123cf0b7ac75.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
其他
白屏测试 / 且js放在CSS之前
HTML
![](https://upload-images.jianshu.io/upload_images/12904618-6147c452e26dba9b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/426)
可以看到CSS已经加载完成,但因为js并未加载完成,产生了堵塞,从而导致了样式没有展现
![](https://upload-images.jianshu.io/upload_images/12904618-c5b7200f9fcfe396.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
直到js也全部加载完成之后,样式才得以出现
![](https://upload-images.jianshu.io/upload_images/12904618-16b5c92edc6eea1d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
这个时候我们来测试一下 async
白屏测试 / 且js放在css之后 但加了async异步
HTML
![](https://upload-images.jianshu.io/upload_images/12904618-33e84e3b177c7e74.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/424)
可以看到即使js放在前面,且没有加载完成,样式还是成功显现了
![](https://upload-images.jianshu.io/upload_images/12904618-d2f10890652033cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
测试async异步效果成功
![](https://upload-images.jianshu.io/upload_images/12904618-88420404334d5b2f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
defer也是同理,同时也更好的理解了异步加载。
关于白屏、FOUC和异步加载的概念,参考之前写的初涉 JavaScript