我通过以下语句将CSS文件的加载时间拉长,来演示白屏和FOUC现象:
<link rel="stylesheet" href="b.css?t=10">
<link rel="stylesheet" href="a.css?t=5">
白屏效果
Chrome浏览器的加载机制会出现白屏的现象当我们访问服务器时,css在加载过程中,页面是这样的:当有一个css文件加载完成时,页面依然白屏:
当所有css文件加载完成时,浏览布局渲染,页面显示出来应有的效果:
FOUC效果
Firefox浏览器的加载机制会出现FOUC的现象当我们访问服务器时,在任何一个css文件未加载完成时,页面已经有显示文本显示了:当有一个css文件加载完成时,浏览器就会通过已经加载完成的css文件渲染页面,没有加载完成的继续加载:
当全部css文件加载完成后,页面的最终呈现最终的效果,在每一个css文件加载完成后,页面的样式会发生变化: