白屏和FOUC 效果演示

我通过以下语句将CSS文件的加载时间拉长，来演示白屏和FOUC现象：

白屏效果

Chrome浏览器的加载机制会出现白屏的现象当我们访问服务器时，css在加载过程中，页面是这样的：

360截图16570201214346.png

当有一个css文件加载完成时，页面依然白屏：

517.png

当所有css文件加载完成时，浏览布局渲染，页面显示出来应有的效果：

518.png

FOUC效果

Firefox浏览器的加载机制会出现FOUC的现象当我们访问服务器时，在任何一个css文件未加载完成时，页面已经有显示文本显示了：

519.png

当有一个css文件加载完成时，浏览器就会通过已经加载完成的css文件渲染页面，没有加载完成的继续加载：

520.png

当全部css文件加载完成后，页面的最终呈现最终的效果，在每一个css文件加载完成后，页面的样式会发生变化：

521.png