本文介绍一种可靠、符合现代 Web 实践的方案：通过内联 <style> 预设基础主题，并利用 document.write() 或服务端逻辑在 HTML 构建阶段决定最终样式表，从而彻底规避动态 link 插入导致的 FOUC 问题。
本文介绍一种可靠、符合现代 web 实践的方案：通过内联 `
在构建支持深色/浅色主题的 Web 应用时，一个常见误区是：在 DOM 加载后（甚至 DOMContentLoaded 之后）才通过 JavaScript 动态创建 <link rel="stylesheet"> 元素来加载主题 CSS。这种做法看似灵活，实则破坏了浏览器关键资源的早期发现机制——浏览器无法在 HTML 解析阶段预加载该 CSS，导致样式延迟应用，进而引发 FOUC（Flash of Unstyled Content），尤其对 <svg><use> 等依赖 CSS 样式的内联元素表现尤为明显。
✅ 正确思路：让浏览器“一开始就知道该加载哪个 CSS”
核心原则是：将主题决策前移至 HTML 解析的最早阶段，确保 <link> 标签作为静态 HTML 的一部分存在，而非由 JS 动态插入。
方案一：服务端渲染（推荐 · 最佳实践）
在服务端（如 Node.js、PHP、SSR 框架）读取用户偏好（Cookie / localStorage 可通过首屏 JS 回传，或结合 Sec-CH-Prefers-Color-Scheme 请求头），生成带正确 href 的 <link>：
<!-- 服务端根据用户偏好输出 --> <link rel="stylesheet" href="/css/dark.css" type="text/css">
✅ 优势：零 FOUC、SEO 友好、资源并行加载、无需客户端 JS 即可生效。
⚠️ 注意：需配合客户端 JS 同步更新 localStorage 和 <html theme="dark"> 属性，以支持后续主题切换。
方案二：客户端 document.write()（仅限 <head> 内同步脚本）
若必须纯前端实现且无法服务端干预，可在 <head> 中紧随 <meta> 之后、任何其他资源之前，使用 同步 <script> 块 + document.write() 强制注入 <link>：
立即学习“前端免费学习笔记（深入）”；
<head>
<meta charset="utf-8">
<!-- ⚠️ 必须在此处，且 script 不能有 async/defer -->
<script>
const savedTheme = localStorage.getItem('theme') || 'default';
// 立即写入 link 标签，浏览器会在解析时立即发现并预加载
document.write(`
<link rel="stylesheet" href="/css/${savedTheme}.css" type="text/css">
`);
</script>
<!-- 其他资源（如字体、JS）放在此后 -->
</head>✅ 优势：CSS 在 HTML 解析阶段即被发现，加载时机与静态 <link> 完全一致；无 FOUC。
❌ 限制：document.write() 仅在文档解析中有效，且会阻塞后续解析（但这是可接受的权衡）；不适用于模块化脚本或 async 场景。
方案三：CSS 自定义属性 + 单 CSS 文件（轻量级替代）
若主题差异主要为颜色变量，可合并所有主题至单个 CSS 文件，用 [data-theme] 控制：
/* all-themes.css */
:root {
--bg: #fff; --text: #333;
}
[data-theme="dark"] {
--bg: #121212; --text: #eee;
}
body { background: var(--bg); color: var(--text); }HTML 中同步设置属性：
<html data-theme="dark">
<head>
<link rel="stylesheet" href="/css/all-themes.css">
</head>JS 初始化（在 <head> 脚本中）：
const theme = localStorage.getItem('theme') || 'default';
document.documentElement.setAttribute('data-theme', theme);✅ 优势：一次加载、零 FOUC、维护成本低；兼容性好（Chrome 49+，Firefox 31+）。
⚠️ 注意：需重构现有 CSS，但长期收益显著。
❌ 为什么不推荐 setTimeout 或 display: none？
原答案中提出的“加定时器等待 1 秒再显示”方案存在严重缺陷：
- 时间不可靠（网络波动、设备性能差异导致样式未就绪即显示）；
- setTimeout 无法监听 CSS 加载完成，link.onload 事件虽可用，但仍无法解决首次渲染时无样式的空白期；
- display: none 会导致整页白屏，违背用户体验最佳实践。
总结与建议
| 方案 | FOUC 风险 | 维护成本 | 兼容性 | 推荐度 |
|---|---|---|---|---|
| 服务端注入 <link> | ✅ 零风险 | 中（需后端配合） | ✅ 全平台 | ⭐⭐⭐⭐⭐ |
| document.write() | ✅ 零风险 | 低 | ✅（注意 script 位置） | ⭐⭐⭐⭐ |
| CSS 变量单文件 | ✅ 零风险 | 中（需重构） | ✅（现代浏览器） | ⭐⭐⭐⭐ |
? 关键结论：FOUC 不是 CSS 加载慢的问题，而是浏览器未能及时发现关键样式资源的问题。解决方案的核心永远是——让 <link> 成为 HTML 的一部分，而非 JS 的产物。 优先采用服务端方案；若纯前端，则用 document.write() 或 CSS 变量，彻底放弃“先渲染、再补样式”的反模式。
