Flash of Unstyled Content (FOUC)
什么是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>
<style type=”text/css” media=”screen”>@import “style.css”;</style>
</head>
link元素解决方案
在基础的head元素中添加link元素可能是最合适的解决方案,这是因为添加一个alternate样式表 或 media-dependent 样式表对每个页面来说都会有好处.我推荐这种方法,由于这样既可以阻止FOUC现象的发生,同时也可以给页面带来一些提升,例如可用性,可访问性或者其他热门词.当然,如果你添加的link元素所添加的是一个空样式表的话也是可以的,但是这将是多大的浪费.
测试link元素解决方案处理后的FOUC页面
<head>
<title>My Page</title>
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” mce_href=”print.css”>
<style type=”text/css” media=”screen”>@import “style.css”;</style>
</head>
script元素解决方案
添加script元素也是一种有效的解决方案,尽管如此,这种方法在某些情况下看起来是那么不自然,例如,我觉得没有任何脚本可以提升页面.我可以添加空白的script元素到head元素中,但是这样似乎感觉和hack一样糟糕.这种情况下,可以选择link元素解决方案.
我提及一下,script元素不一定非要添加到head元素中,但是需要在body元素内容之前填写这个标签,因此可以将script元素防止在body中,但是一定要置于可视内容之前,也是有效的.
测试script元素解决方案处理后的FOUC页面
<head>
<title>My Page</title>
<script type=”text/javascript”> </script>
<style type=”text/css” media=”screen”>@import “style.css”;</style>
</head>
Flash of Unstyled Content (FOUC)相关推荐
- 优化CSS在网页中的加载方式
点评:1.应该将 CSS 放置于结构的上方(一般放置于 head 元素内).CSS 是解释型语言,Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西.只有将 CSS 前置,才可在浏 ...
- CSS遮罩——如何在CSS中使用遮罩
Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...
- mask属性是css3的吗_CSS遮罩——如何在CSS中使用遮罩
大概一年前,我写过一篇文章介绍有关webkit中新的css技术--css滤镜,如果其他浏览器不能支持的话会,这是个麻烦. 有关于Webkit中的滤镜,大家要是感兴趣的话可以阅读<CSS3 Fil ...
- 提高Web性能的14条法则（详细版）
Steve Souders这个家伙写了一本书叫做:High Performance Web Sites: Essential Knowledge for Front-End Engineers 这本书 ...
- 收藏提高Web性能的14条法则（详细版）
Steve Souders这个家伙写了一本书叫做:High Performance Web Sites: Essential Knowledge for Front-End Engineers 这本书 ...
- [css] 什么是FOUC？你是如何避免FOUC的？
[css] 什么是FOUC?你是如何避免FOUC的? FOUC 即 Flash of Unstyled Content,是指页面一开始以样式 A(或无样式)的渲染,突然变成样式B. 原因是样式表的晚于 ...
- 什么是FOUC？如何避免FOUC？
今天了解了一个新的名词叫做 FOUC 浏览器样式闪烁,之前也听说过一些类似的东西,比如样式突变等等,但这东西竟然有学名的..什么是FOUC(文档样式短暂失效)?如果使用import方法对CSS进行导入 ...
- 什么是FOUC?如何避免
Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁. 解决方法:把样式表放到文档的<head& ...
- javascript知识点
一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5.未来三到五年的规划是怎样的? ...
最新文章
- 总分 Score Inflation
- Python学习：字符串
- redis部署与卸载
- python逐行读取数据时出现错误_python如何逐行读取数据
- android安装python opencv_Python、C++、Android OpenCV 开发环境的配置
- Less的@import指令
- 快来一起玩转LiteOS组件：Curl
- 纸价大涨！纸厂却纷纷停产，用纸也被卡脖子了
- Python——assert（断言）主进程级的终止判断语句
- Unity Application Block 发布
- 习题3-6 纵横字谜的答案（Crossword Answers, ACM/ICPC World Finals 1994, UVa232）
- 浅谈我的UI设计之路
- 南大计算机软件所,2020考研南京大学计算机软件研究所推免夏令营通知_南大软件所20推免_聚创南大考研网...
- java 输入一个时间，获取当前周的周一以及周五时间【自然周】
- [shell脚本] realtek平台 Mifi初始化时候，初始化wifi的黑白名单的sh脚本
- 设计问卷调查有哪些技巧？
- 梦想帝王多开辅助?梦想帝王脚本兵种详解
- 计算机绘图要什么铅笔,素描初学者需要准备哪些画画工具
- 台达服务器显示b,台达变频器VFD-B系列故障代码详表
- 7.26第二课课堂笔记