牧天的故事

CSS Note—FOUC：文档样式短暂失效

涵义

FOUC：Flash of Unstyled Content，中文译名常用的为文档样式短暂失效，是指使用import方法导入样式表时,出现在Windows IE下的一种现象。这种现象表现为：页面内容以无样式显示瞬间后，立即正常显示，即以无样式显示页面内容的瞬间闪烁。只在Internet Explorer下会出现这种现象。而如果导入的样式表存在于IE的缓存，则不会出现这种现象。

进一步理解，就是在网速既定的情况下，IE首先加载HTML文档内容，然后加载CSS样式，然后把CSS样式应用到HTML文档上。网络传输的延迟，所以会出现这种现象。

解决方法

1、在文档的head元素中添加一个link元素

在基础的head元素中添加link元素可能是最合适的解决方案。这是因为添加一个样式表对每个页面来说都会有好处，可以提升页面的可用性和可访问性。

2、在文档的head元素中添加一个script元素

script元素不一定非要添加到head元素中，但是需要在body元素内容之前填写这个标签，因此可以将script元素放置在body中，但是一定要置于可视内容之前,也是有效的。

两个方法下添加的元素均可以是空元素，即

<link rel="stylesheet" type="text/css" href="">

或者

<script type="text/javascript"></script>

但最好是让它们有意义。