如何避免无样式内容闪烁(FOUC)？

孙吉亮发布于2019-08-30 15:56 / 1825人阅读

什么是FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁即文档样式短暂失效
如果使用 import 引入 css 文件会导致某些页面在IE下出现一些奇怪的现象：

以无样式显示页面内容的瞬间闪烁

形成原因

通过 @import 引入 css 样式

样式表放在页面底部

有多个样式表，放在 html 不同位置

原理：IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法：

在head里面加入一个link或者script标签

idc机房托管云服务器拖动无闪烁避免应用无响应如何避免关联

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117538.html

前端基础问题整理-HTML相关

摘要：中规范定义标签名和属性对大小写敏感所有标签名必须用小写字母。所以为了避免这些问题最好使用标签将样式表放在文档的中。相关问题以及资料从网络查阅本文用于自己扎实前端基础如有错误欢迎指出。 DOCTYPE的作用以及常见的DOCTYPE类型声明位于文档中的最前面的位置,处于标签之前,用来告知浏览器页面目前的文件是用哪种版本的HTML(或XML)撰写。常见类型 HTML 5 HTML ...

wuyumin 2019-08-05 17:50 评论0 收藏0
Web前端工程师应该懂的的知识点——HTML/CSS

摘要：的中指向一个，而中不需要，是因为不是基于标准通用标记语言。不占空间占空间是继承的，所以如何子孙节点修改可以显示但不可以。意识是先显示了无样式的文档内容，后又加载了样式文件，导致重新渲染，出现闪烁的现象。中的伪类与伪元素伪类伪元素优雅升级 vs 渐进增强优雅升级：先满足所有功能，再想尽办法去兼容所有浏览器。渐进增强：先满足基本功能，保证网页的可访问性，注重标签的语言化；然后再为高级浏...

WalkerXu 2019-08-30 12:43 评论0 收藏0
Web前端工程师应该懂的的知识点——HTML/CSS

摘要：的中指向一个，而中不需要，是因为不是基于标准通用标记语言。不占空间占空间是继承的，所以如何子孙节点修改可以显示但不可以。意识是先显示了无样式的文档内容，后又加载了样式文件，导致重新渲染，出现闪烁的现象。中的伪类与伪元素伪类伪元素优雅升级 vs 渐进增强优雅升级：先满足所有功能，再想尽办法去兼容所有浏览器。渐进增强：先满足基本功能，保证网页的可访问性，注重标签的语言化；然后再为高级浏...

psychola 2019-08-01 14:54 评论0 收藏0
前端魔法堂：解秘FOUC

摘要：前言对于问题多多的，浏览器样式闪烁是一个不可忽视的话题，但对于的浏览器就不用理会了吗下面尝试较全面地解密。示例说明，不管在哪里引入，在页面的所有下载完成前，整个页面将不会被渲染。前言对于问题多多的IE678，FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题，但对于ever green的浏览器就不用理会了吗？下面尝试较全面地解密F...

Dean 2019-08-29 12:25 评论0 收藏0
前端魔法堂：解秘FOUC

摘要：前言对于问题多多的，浏览器样式闪烁是一个不可忽视的话题，但对于的浏览器就不用理会了吗下面尝试较全面地解密。示例说明，不管在哪里引入，在页面的所有下载完成前，整个页面将不会被渲染。前言对于问题多多的IE678，FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题，但对于ever green的浏览器就不用理会了吗？下面尝试较全面地解密F...

MRZYD 2019-08-20 15:56 评论0 收藏0