FOUC（Flash of Unstyled Content，无样式内容闪烁）是指在网页加载过程中，用户可能会短暂地看到未应用样式的原始 HTML 内容，随后样式表加载完成后，页面才会以正确的样式重新渲染。这种现象会影响用户体验，显得页面加载不连贯和不专业。
FOUC 的原因
FOUC 通常是由于样式表加载延迟或顺序不当引起的。以下是一些常见原因：
-
样式表加载延迟：样式表放在 HTML 文档的底部，或通过 JavaScript 动态加载。
-
外部样式表：样式表通过外部链接引用，加载速度依赖于网络连接状况。
-
渐进式增强和内容闪烁：使用 JavaScript 动态修改样式或内容，导致内容在 JavaScript 执行前短暂无样式。
避免 FOUC 的方法
-
将样式表放在
<head>中：-
确保所有样式表链接都放在 HTML 文档的
<head>部分。这是最基本且最有效的防止 FOUC 的方法。
html复制代码<head><link rel="stylesheet" href="styles.css"> </head>
-
-
内联关键样式：
-
将关键的 CSS 直接内联到 HTML 中。这种方法适用于重要的初始样式，可以确保这些样式在第一时间被加载和应用。
html复制代码<head><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;}</style> </head> -
-
减少样式表的数量：
-
合并和最小化 CSS 文件，减少 HTTP 请求数量。这样可以加快样式表的加载速度，减少 FOUC 发生的可能性。
-
-
使用
rel="preload"：-
利用
<link rel="preload">提前加载样式表，确保样式表在页面解析时已经准备就绪。
html复制代码<head><link rel="preload" href="styles.css" as="style" οnlοad="this.οnlοad=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="styles.css"></noscript> </head>
-
-
避免使用 JavaScript 动态加载样式表：
-
尽量避免通过 JavaScript 动态加载 CSS 文件。如果必须使用，可以确保在 DOM 加载之前完成样式表的加载。
-
-
服务器端渲染（SSR）和样式提取：
-
对于使用 React、Vue 等框架的应用，使用服务器端渲染（SSR）和样式提取工具（如
styled-components的ServerStyleSheet）可以确保样式在服务器端渲染时已经被注入到 HTML 中。
-
-
合理使用 Web 字体：
-
Web 字体加载也可能导致 FOUC，可以使用
font-display: swap或其他字体加载策略，确保在字体加载期间使用后备字体，避免内容无样式闪烁。
-
![[Qt的学习日常]--常用控件3](http://pic.xiahunao.cn/[Qt的学习日常]--常用控件3)
)
)