一、什么是 FOUC(无样式内容闪烁)?
**FOUC（Flash of Unstyled Content）是指网页在加载过程中，由于CSS样式加载延迟或加载顺序不当，导致页面出现闪烁或呈现出未样式化的内容的现象。**
这种现象通常发生在HTML文档已经加载，但CSS样式表尚未加载或加载顺序不正确时，导致页面内容在没有应用样式的情况下短暂显示，随后样式表加载完成，页面内容才呈现出最终的样式效果。这种闪烁现象不仅影响用户体验，还可能对网站的整体形象和品牌形象造成负面影响。
FOUC 的原因是由于浏览器在渲染页面时，会先加载 HTML 文件，然后再加载 CSS 文件。如果 CSS 文件加载时间过长或者放置位置不当，浏览器就会先加载 HTML 文件并显示页面内容，而没有样式的 CSS 文件则会在加载完成后才被应用于页面，从而导致页面出现无样式的内容闪烁现象。
示例： FOUC - FlashOf Unstyled Content 文档样式闪烁现象的产生
html
<style media="all">
@import"../fouc.css";
</style>而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法 简单的出奇，只要在**<head>** 之间加入一个**<link>** 或者**<script>**元素就可以了。
下面我们就来总结一下，都有哪些方法可以避免 FOUC现象的发生？
二、如何来避免 FOUC现象的发生？
为了避免FOUC现象，可以采取以下几种方法：
-
使用内联CSS或内部样式：使用内联CSS或在
<head>中使用内部样式------内嵌样式表：将CSS样式放在**<head>** 中：将CSS链接或样式块放在HTML文档的**<head>**部分，确保浏览器在渲染页面内容之前首先加载和应用样式。这样做可以确保页面在显示之前已经应用了所需的样式，避免了无样式内容的短暂显示。总之，使用内联CSS或内部样式都可以确保样式立即可用于渲染页面内容，避免FOUC现象的发生。 -
预加载样式表： 使用**
<link>** 标签的**preload属性------在<link>标签中使用preload**属性，可以确保浏览器尽早加载CSS文件。这有助于减少FOUC现象的发生，因为样式表可以在页面内容渲染之前被加载。 -
**优化样式表的加载顺序和位置：通过合理规划样式表的加载顺序和位置，可以避免因样式表加载延迟而导致的FOUC现象。例如，将样式表放在
<head>**中，或者使用媒体查询（media queries）来控制样式表的加载条件。 -
**使用样式回退：**在CSS样式加载之前，可以使用基本的HTML样式来避免FOUC，确保页面在加载完成前依然有可用的样式。
-
合理使用Web 字体： Web 字体加载也可能导致 FOUC，可将字体文件嵌入到CSS中，也可以使用 **
font-display: swap**或其他字体加载策略，确保在字体加载期间使用后备字体（如系统字体），避免内容无样式闪烁。 -
避免使用 JavaScript 动态加载样式表 ：尽量避免通过 JavaScript 动态加载 CSS 文件。如果必须使用，可以确保在 DOM 加载之前完成样式表的加载。
-
避免使用阻塞CSS加载的脚本：确保JavaScript脚本不会阻塞CSS样式的加载，可以使用**
async或defer**属性来异步加载脚本。 -
服务器端渲染（SSR）和样式提取 ：对于使用 React、Vue 等框架的应用，使用服务器端渲染（SSR）和样式提取工具（如
styled-components的ServerStyleSheet）可以确保样式在服务器端渲染时已经被注入到 HTML 中。 -
**使用样式表链接的 media 属性：**在 <link> 标签中添加 media 属性，指定样式表适用的媒体类型，例如 screen、print 或者 all 等，可以避免不必要的样式表加载，从而提高页面的性能和速度。
总之，避免FOUC现象需要从多个方面入手，包括优化CSS的加载方式、合理规划样式表的加载顺序和位置，以及使用成熟的样式表框架等。通过这些方法，可以有效减少FOUC现象的发生，提升用户体验和网站的整体形象。
参考资料
