什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

2024-05-25 14:06:11

一、FOUC 是什么

　FOUC即无样式内容闪烁，也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。

　　在引用css的过程中，如果方法不当或者位置引用不对，会导致某些页面在windows下的ie出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称FOCU

　　原因分析：当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

二、如何避免FOUC

1、样式表前置

　　根据浏览器渲染的顺序，将CSS在<head>中引入或者嵌入，相对于将CSS放到<body>或者页面底部来说，可以使页面渲染速度加快，这对于页面内容比较丰富的网站或者网络链接较慢时相当重要。

　　假如将样式表放置于底部，就会导致浏览器还未加载样式表就开始渲染页面，无法渐进式渲染页面而直接从无样式状态立即跳转到有样式状态，就会造成FOUC，用户体验较差；

　　此外有些浏览器可能会在CSS下载完成后才开始渲染页面，样式表放在下方会导致页面渲染推迟。

2、尽量使用<link>而避免使用@import

　　当HTML文件被加载时，<link>引用的文件会同时被加载，而@import引用的文件则会等页面全部下载完毕再被加载，所以有时候浏览@import加载CSS的页面时会没有样式，会出现FOUC现象，网速慢的时候就比较明显。

　　此外当<link>与@import混用可能会对网页性能有负面影响，在一些低版本IE中<link>与@import混用会导致样式表文件逐个加载，破坏并行下载的方式导致页面加载变慢。

　　此外无论是哪种浏览器，若在<link>中引入的CSS中继续使用@import加载外部CSS，同样会导致顺序加载而不是并行加载，因为浏览器需要先解析<link>引入的CSS发现@import外部CSS后再次引入外部CSS，这样就导致页面加载变慢。

什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？相关推荐

bootstrap 隐藏元素_Bootstrap中折叠面板的样式内容
Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容,控制内容的可见性.它是一个灵活的插件,使用少量的类(来自必需的过渡插件),以方便切换行为. 运作方式插件用 ...
vue element-ui 手机号校验验证码校验获取验证码倒数60秒无样式实现
这段时间被迫搞前端搞裂开了,记录一下手机号验证码校验登录的极简无样式前端实现巨丑!希望大佬们不介意下面是先演示效果点击登陆后显示校验信息输入手机号点击获取验证码输入符合校验的内容后点击登录提 ...
ZedGraph5.1.5源码分析去掉鼠标悬浮内容闪烁问题(附源码下载)
场景在使用ZedGraph绘制曲线图时,将鼠标悬浮时内容闪烁,且频率很高. 找到其源码,发现不论鼠标移动的范围大小,甚至乎不论鼠标是否移动,都要刷新一次Tooltip. 注: 博客主页: https ...
微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
jquery word export 导出html内容无样式或无图片问题
1. 首先要准备好对应的js文件 jquery文件,FileSaver,以及主要的jquery.wordexport <script type="text/javascript&quo ...
HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
publiccms实现遍历多级分类下的不同样式内容
大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂前言现在是2022年1月2日17:06:51,假期这两天都在做publiccms. 上篇文章遗留的问题,最终还是没有按照富文本去做,后期在看吧: ...
软考-软件设计师笔记【原创无样式版】需要笔记请联系
越努力,越幸运!!! 计算机系统基础 (一)CPU的功能 (1)程序控制功能.CPU通过执行指令来控制程序的执行顺序. (2)操作控制. (3)时间控制. (4)数据处理.CPU最根本的任务. (二) ...
Vmware配置共享文件功能（针对ubuntu的/mnt/hgfs无文件内容问题）
2023.3.15 星期三长沙天气晴.实习工作时遇到一个问题,我vmware设置好了共享文件,但是Ubuntu里面无任何文件,查阅资料,有许多人遇到诸如此类的问题,资料有些不完整,故便总结出,方便 ...

最新文章

热门文章