Flash of Unstyled Content (FOUC)

发布时间：2020-12-15 18:16:09 所属栏目：百科来源：网络整理

导读：什么是FOUC(文档样式短暂失效)? 如果使用import方法对CSS进行导入,会导致某些页面在Windows??下的Internet?Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这似乎不可想象,我将这种现象称之为文档样式短暂失效(Flash?of??Unstyled?Content),简

什么是FOUC(文档样式短暂失效)?

如果使用import方法对CSS进行导入,会导致某些页面在Windows??下的Internet?Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这似乎不可想象,我将这种现象称之为文档样式短暂失效(Flash?of??Unstyled?Content),简称为FOUC.

因为这种奇怪的现象似乎只会在Internet??Explorer中出现,我们尝试得出一个结论,很显然这是IE的一个问题.我不打算继续探讨这个结论.对我来说,我也不清楚是否FOUC只会给那些非W3C推荐的客户端带来困扰.尽管我不能代表W3C说些什么,但是我期待Internet??Explorer能够对文档样式短暂实效进行深层次的发掘和研究.

我如何能看到FOUC？
首先,你需要使用Windows版本的IE(版本5或更高级的版本),其次,你需要找到一个能够展示FOUC现象的页面,你不需要再去搜索了,这个页面就是个好例子.
在这里,提示很重要的一点.如果导入的样式表存在于IE的缓存(也称为IE临时文件)中,页面内容的瞬间无样式闪现将不会出现.出于测试目的,在测试FOUC页面之前需要删除IE临时文件,如果你不确认如何进行的话,你可以查看微软提供的相关在线帮助.下面我给出测试FOUC的建议步骤:
1?使用IE5+/Win载入测试的FOUC页面,这个页面就是绝好的例子;
2??载入一个不同的页面,在这个步骤中,你选择哪个页面并不是重要的,只要它不和你所测试的页面共享文件,最好选择一个不同网站的页面;
3??删除IE临时文件;
4?点击后退按钮返回你要测试的页面
5?查看文档样式短暂失效现象

注意一些因素,例如运行迟缓的电脑和网络设备缓存能力,可能会降低显示内容瞬间无样式闪烁的几率.

如何解决FOUC
只需要在文档的head元素中添加一个link元素或者添加script元素就可以防止FOUC的发生.

基础head?元素
出于比较目的,下面的是出现FOUC的基本head元素内容
测试此基础head元素显示FOUC现象

<head>??

<title>My?Page</title>??

</head>?

link元素解决方案
在基础的head元素中添加link元素可能是最合适的解决方案,这是因为添加一个alternate样式表??或?media-dependent??样式表对每个页面来说都会有好处.我推荐这种方法,由于这样既可以阻止FOUC现象的发生,同时也可以给页面带来一些提升,例如可用性,可访问性或者其他热门词.当然,如果你添加的link元素所添加的是一个空样式表的话也是可以的,但是这将是多大的浪费.

测试link元素解决方案处理后的FOUC页面

<head>??

<title>My?Page</title>??

</head>?

script元素解决方案
添加script元素也是一种有效的解决方案,尽管如此,这种方法在某些情况下看起来是那么不自然,例如,我觉得没有任何脚本可以提升页面.我可以添加空白的script元素到head元素中,但是这样似乎感觉和hack一样糟糕.这种情况下,可以选择link元素解决方案.
我提及一下,script元素不一定非要添加到head元素中,但是需要在body元素内容之前填写这个标签,因此可以将script元素防止在body中,但是一定要置于可视内容之前,也是有效的.
测试script元素解决方案处理后的FOUC页面

<head>??

<title>My?Page</title>??

</head>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!