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

2024-06-18 559 阅读2分钟

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" onload="this.onload=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 或其他字体加载策略，确保在字体加载期间使用后备字体，避免内容无样式闪烁。