在这次的产品发布中，客户发现了一个问题，就是在Firefox浏览器中，页面在加载的时候，出现没有样式的内容一闪而过的现象。其实，在测试过程中，我们也看到了类似的问题，但是并没有意识到这是一个问题，以为是网络慢导致的。

经过问题定位，发现这就是Flash of Unstyled Content (FOUC)，也就是文档样式短暂失效。

从网络中查到了对应的解决方法：http://blog.sina.com.cn/s/blog_49e464d80100fm9h.html

什么是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现象

  1. <head>
  2. <title>My Page</title>
  3. <style type=”text/css” media=”screen”>@import “style.css”;</style>
  4. </head>

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

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

  1. <head>
  2. <title>My Page</title>
  3. <link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” mce_href=”print.css”>
  4. <style type=”text/css” media=”screen”>@import “style.css”;</style>
  5. </head>

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

    1. <head>
    2. <title>My Page</title>
    3. <script type=”text/javascript”> </script>
    4. <style type=”text/css” media=”screen”>@import “style.css”;</style>
    5. </head>

Flash of Unstyled Content (FOUC)的更多相关文章

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

      问题描述 偶然间看到FOUC这个单词,在Google里找了半天终于发现了它的含义:Flash Of Unstyled Content.它指的是在某些情况下,IE在加载网页时会出现短暂的CSS样式失 ...

  2. FOUC（Flash Of Unstyled Content）文档样式闪烁

    今天看面试题看到了这个新名词..我以前是没有发现过这种状况,应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧. 什么是文档样式闪烁(Flash Of Unstyled Co ...

  3. web前端性能优化

    性能优化对于用户体验无疑是非常重要的,下面介绍一些性能优化的方法. 1.减少HTTP请求 http请求越多,那么消耗的时间越多,如果在加上网络很糟糕,那么问题就更多了.且如果网页中的图片.css文件. ...

  4. CSS遮罩——如何在CSS中使用遮罩

    Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...

  5. [转]CSS遮罩——如何在CSS中使用遮罩

    特别声明:此篇文章由D姐根据Christian Schaefer的英文文章原名<CSS Masks – How To Use Masking In CSS Now>进行翻译,整个译文带有我 ...

  6. css Masks

    css Masks:添加蒙板: 测试在微信端可以支持了.谷歌浏览器支持.safari应该也是支持的. 效果:http://runjs.cn/code/xrrgmgmk 但是谷歌可以支持这样子的:htt ...

  7. 使用media来加载css

    默认的,css被当做渲染时候必须加载的资源. 设备类型和设备询问允许我们设置一些css资源编程可选的 对于所有的css资源,无论是必须的还是可选的,都会被浏览器加载 The New York Time ...

  8. 什么是FOUC？如何避免FOUC？

    因为在看一些面试题,所以接触到了这个词 FOUC 什么叫做 FOUC 浏览器样式闪烁 如果使用import方法对css进行导入,会导致某些页面在Windows 下的Internet Explorer出 ...

  9. 什么是FOUC？如何避免FOUC？///////////////////////////zzzz

     一个新的名词叫做 FOUC 浏览器样式闪烁,之前也听说过一些类似的东西,比如样式突变等等,但这东西竟然有学名的..什么是FOUC(文档样式短暂失效)?如果使用import方法对CSS进行导入,会导致 ...

随机推荐

  1. selenium-webdirver api-定位方式

    1,8种单数定位方式 # 通过ID定位目标元素 driver.find_element_by_id('i1') # 通过className定位目标元素 driver.find_element_by_c ...

  2. 条款50：使用自定义的new以及delete的时机会

    几种最常见的这么做的理由:     1.用来检测运行上的错误:可以在分配的内存空间的起始以及结束分别放置单独的签名     2.为了强化性能     3.为了收集使用上的统计数据 按照第一点就可以举一 ...

  3. php操作rabbitmq

    1.配置交换机,队列,然后绑定 <?php $conn_args = [ 'host' => '127.0.0.1', //rabbitmq 服务器host 'port' => 56 ...

  4. Busybox shell脚本修改密码

    /****************************************************************************** * Busybox shell脚本修改密 ...

  5. HihoCoder1105 题外话·堆(基础二叉搜索树)

    第1行为1个整数N,表示需要处理的事件数目. 接下来的M行,每行描述一个事件,且事件类型由该行的第一个字符表示,如果为'A',表示小Ho将一粒糖果放进了盒子,且接下来为一个整数W,表示这颗糖果的重量: ...

  6. 2017-2018-1 20179215《Linux内核原理与分析》第十二周作业

    Sql注入基础原理介绍 分组:和20179205王雅哲共同完成实验 一.实验说明 1.1 sql注入  SQL注入攻击通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组 ...

  7. 高并发下Redis如何保持数据一致性（避免读后写）

    通常意义上我们说读后写是指针对同一个数据的先读后写,且写入的值依赖于读取的值. 关于这个定义要拆成两部分来看,一:同一个数据:二:写依赖于读.(记住这个拆分,后续会用到,记为定义一.定义二)只有当这两 ...

  8. QString的拼接

    QString的append()函数则提供了类似的操作,例如: 1. str = "User: ";     2. str.append(userName);     3. str ...

  9. （转）通过WMI获取网卡MAC地址、硬盘序列号、主板序列号、CPU ID、BIOS序列号

    最近由于项目的需要,需要在程序中获取机器的硬盘序列号和MAC地址等信息,在C#下,可以很容易的获得这些信息,但是在C++程序中感觉比较麻烦.经过百度,发现很多大虾都是通过WMI来获取这些硬件信息的,网 ...

  10. html5 日常小结

    HTML5新标签汇总 1.  html5新的 (input type=类型) 元素 <input type="number" name="quantity" ...