FOUC - Flash Of Unstyled Content 文档样式闪烁

最新推荐文章于 2023-09-18 17:32:01 发布

weixin_30587927

最新推荐文章于 2023-09-18 17:32:01 发布

阅读量98

点赞数

原文链接：http://www.cnblogs.com/radom/archive/2012/06/23/2559299.html

版权

问题描述

偶然间看到FOUC这个单词，在Google里找了半天终于发现了它的含义：Flash Of Unstyled Content。它指的是在某些情况下，IE在加载网页时会出现短暂的CSS样式失效。这种问题出现的条件是比较独特的：
1. 只发生在Windows上的IE（5.0版本以上）
2. 只发生在那些会出现FOUC现象的网页
3. IE的临时文件夹中没有缓存过该页面的CSS文件

现在用IE访问这个页面，就可以看到FOUC发生的时候的情况（当然前提是你之前没有访问过它，否则可能需要清空IE的临时文件夹再访问）。

这个页面的特殊之处在于它的<head>标签里是没有任何的<link>或<script>元素的，它只有这样三行代码：
<title>Flash of Unstyled Content (FOUC)</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法

解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。