FOUC-文档样式短暂失效

HTML5学堂：FOUC：Flash Of Unstyled Content。它指的是加载网页时会出现短暂的CSS样式失效。2013年年底的时候，自己的一个学生问自己这个问题，因此发出来跟大家分享一下~

造成FOUC的原因

浏览器采用的是windows版本的IE浏览器，且版本在5.0以上（也就是现在所有的IE浏览器）。

IE的临时文件夹中没有缓存过该页面的CSS文件。

样式表位置异常：如使用import方法导入样式表；将样式表放在页面底部；有多个样式表，放在html结构的不同位置。

FOUC的基本原理

样式表晚于结构代码的加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象，这段时间的长短跟网速，电脑速度都有关系。

FOUC的解决办法

在head之间加入一个link或者script元素就可以了

欢迎沟通交流~HTML5学堂