Open
Description
第18天 什么是FOUC？你是如何避免FOUC的？
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
{{ message }}
No one assigned
No type
No projects
No milestone
None yet
Activity
tzjoke commentedon May 29, 2019
font-display
AricZhu commentedon Jul 6, 2019
简单来说就是使用当文档结构表（HTML）先于样式表（CSS）渲染，这时候渲染出来的是没有样式的页面，然后当浏览器解析到样式表的时候，又结合样式表重新渲染了一遍文档，这时候页面就添加了样式，而前后两次的页面变换会出现一瞬间的闪烁。
解决办法也很简单，就是确保样式表最先渲染即可，比如css样式表添加到head标签中。
Konata9 commentedon Jul 29, 2019
FOUC 即 Flash of Unstyled Content，是指页面一开始以样式 A（或无样式）的渲染，突然变成样式B。
原因是样式表的晚于 HTML 加载导致页面重新进行绘制。
@import方式导入样式表解决方法：把
link标签将样式放在head中参考文档:什么是 FOUC？如何避免 FOUC？
seho-dev commentedon Aug 3, 2019
前面有一个问题就是关于style放在head中和放在body中有什么区别
cssdom和htmldom是并行的，如果cssdom放在了body中会影响htmldom，从而导致html页面重新绘制，可能会白屏情况
hc951221 commentedon Aug 7, 2019
html结构加载完成后再加载css样式表，当网速慢的时候会出现闪烁，用@import导入样式文件会出现这种情况，解决方法是用link导入样式文件，在加载html时同步加载样式
yyz841875845 commentedon Dec 23, 2019
第一次听，敲一遍增加记忆， FOUC 指的是先展示节点，css 后加载，原因是 采用了 @import 活着 style放在 body中，解决方案 使用 link 链接css 并放在head中。优先加载
blueRoach commentedon Jun 4, 2020
FOUC：加载时样式突然变化
原因：由于在渲染HTML时，遇到CSS样式表会重新渲染HTML
解决：尽量把样式表放到body标签上面
smile-2008 commentedon Sep 16, 2020
FOUC：加载时样式突然变化
原因：由于在渲染HTML时，遇到CSS样式表会重新渲染HTML
样式表没有放到head里面
使用了@import导入样式
解决：尽量把样式表放到body标签上面
maxthonl commentedon Oct 27, 2020
我不喜欢这类的英文简写，我之前做过各类CAD的集成，CAD行业也会有很多简写，说实在的一般制造业公司内部也会有很多简写，真心记不住这些简写，而且好多简写会撞库，头大。
xiezhenghua123 commentedon Apr 16, 2021
FOUC：样式表加载晚于html结构
解决办法：将样式表放到head里面
amikly commentedon Nov 5, 2021
定义
如果使用import方法对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC
原因
当样式表晚于结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象，下列情况可能会出现：
解决办法
使用link标签将样式表放在文档head中
WangXi01 commentedon Jul 13, 2022
现在回头来看，一般不会问这种面试题了
Iambecauseyouare commentedon Mar 2, 2023
FOUC:使用import方法对css进行导入，会导致某些页面在Windows下的Internet Explorer出现奇怪的现象：以无样式显示页面内容的瞬间闪烁，这种现象称为文档样式短暂失效
解决方法：使用link标签将样式表放入head中
never123450 commentedon Sep 1, 2023
FOUC（Flash of Unstyled Content）是指在网页加载过程中，由于样式表（CSS）加载延迟或未能及时应用，导致页面元素在加载完成之前以未样式化的形式显示出来的现象。
为了避免 FOUC，可以采取以下几种方法：
内联样式：将关键的 CSS 样式直接嵌入到 HTML 页面的
<head>标签内，以内联样式的形式呈现。这样可以确保样式在页面加载过程中立即生效，避免 FOUC。样式表优化：优化样式表的加载和应用，使其尽早加载并在页面渲染之前应用。可以将样式表放在
<head>标签中，并使用适当的加载和缓存策略。预加载样式表：使用预加载（preload）或异步加载（async）等技术，提前加载样式表文件，以确保在页面渲染之前已经下载并准备好样式。
隐藏内容：通过将页面的主要内容隐藏，直到样式表加载和应用完成，再将其显示出来。这可以使用 JavaScript 或 CSS 技术来实现。
FOUC 闪烁修复：使用 JavaScript 或 CSS 技术来处理 FOUC 闪烁问题，例如使用 JavaScript 监听 DOMContentLoaded 事件，在样式表加载完成后再将页面内容显示出来。
需要根据具体情况选择适合的方法来避免 FOUC。综合使用上述方法可以最大程度地减少 FOUC 的出现，并确保页面在加载过程中能够正确地呈现样式化的内容。
lili-0923 commentedon Feb 29, 2024
FOUC即无样式内容闪烁，也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。
样式表前置和尽量使用而避免使用@import