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

1，使用import方法导入样式表。

2，将样式表放在页面底部

3，有几个样式表，放在html结构的不同位置。其实原理很清楚：当样式表晚于 结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂 的 花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中

FOUC的更多相关文章

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

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

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

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

  3. 转：什么是FOUC？如何避免FOUC？

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

  4. 前端魔法堂：解秘FOUC

    前言  对于问题多多的IE678,FOUC(flash of unstyled content)--浏览器样式闪烁是一个不可忽视的话题,但对于ever green的浏览器就不用理会了吗?下面尝试较全面 ...

  5. 测试模拟 白屏 / FOUC

    白屏和FOUC 白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的. 我们可以通过一个实验来进行测试和模拟白屏.FOUC的现象,让我们更好的理解白屏.FOUC. 测试de ...

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

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

  7. Flash of Unstyled Content (FOUC)

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

  8. 【18】什么是FOUC?如何避免

    [18]什么是FOUC?如何避免 Flash Of Unstyled Content: 用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁. 解决方法: ...

  9. 如何避免FOUC，是如何产生的

    FOUC(Flash Of Unstyled Content)即浏览器样式闪烁或者叫做无样式内存闪烁(用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁 ...

随机推荐

  1. andriod sdk 模拟器的安装以及root

    安卓模拟器常用的一共2种java sdk 和 bluestacks 蓝手指.前者比较卡,后者貌似不能模拟2g/3g上网.   本文主要是针对java sdk的安装使用,以及root.关于root的意思 ...

  2. node.js 上传图片

    依赖库 connect,gm,imagemagick,image-size connect:中间件 gm,imagemagick:用来处理图片如缩放.切割.添加文字水印等 image-szie:获取图 ...

  3. vue组件父子组件传递引用类型数据

    今天在写分页功能时,发现父子组件传值时,子组件监听不到父组件中数据的变化,传递的是一个引用类型的数据 其原因是引用类型共用一个内存地址,父子组件用的是同一个对象,故子组件监听不到变化,此时就需要做一个 ...

  4. 水滴效果的下拉刷新--第三方开源 开源--WaveSwipeRefreshLayout

    下载地址:https://github.com/recruit-lifestyle/WaveSwipeRefreshLayout 直接把代码复制到你的项目于即可使用: 使用: 在xml中: <j ...

  5. KVM-环境安装

    1.操作系统安装 本文采用Centos6.4X64操作系统,也可以采用RHEL/CentOS6.x. (1)查看系统版本.内核版本 ##查看系统版本 [root@KVM ~]# cat /etc/re ...

  6. PHP学习之数组Array操作和键值对操作函数（一）

    PHP 中的数组实际上是一个有序映射.映射是一种把 values关联到 keys 的类型.此类型在很多方面做了优化,因此可以把它当成真正的数组,或列表(向量),散列表(是映射的一种实现),字典,集合, ...

  7. DIV设置浮动float以后下一个DIV要换行的方法

    <div style=“float:left;”> 1111111 </div> <div style=“float:left;”>222222 </div& ...

  8. Python函数-cmp()

    cmp(x, y) 作用:         比较两个对象x和y,如果x < y ,返回负数:x == y, 返回0:x > y,返回正数. 注:在python2所有版本中都可用,但在pyt ...

  9. 从内存中直接运行PE程序

    效果是这样的,假设一个PE数据在内存里面了,我们利用下面我讲的技术可以直接建立一个进程并运行这个PE,当然直接在本进程运行在可以,这两钟技术在前些时日我都有实现,今天我只说关于建立进程并运行的,当然, ...

  10. FPGA的年龄

    FPGA的年龄 1984年,Xilinx公司发布了第一个FPGA(但直到1985年这些器件才真正发货).尽管这些器件比当时那些简单的可编程逻辑器件(PLD)复杂的多,但大多数数字设计工程师却仅仅用这些 ...