FOUC本质是首屏关键CSS未在HTML解析完成前就绪，修复核心是内联关键CSS至<style>标签（≤10KB），并用preload+onload异步加载非关键CSS。
FOUC 不是样式没加载完，而是浏览器在解析 HTML 时，关键 CSS 没来得及参与首次渲染——修复核心就一条：让首屏必需的样式在 HTML 解析完成前就“已就绪”，而不是靠位置或运气。
为什么放在里还是闪
放对位置只是触发阻塞的前提，不是充分条件。以下情况会让浏览器直接跳过阻塞逻辑：
-
media值不匹配当前环境（如media="(min-width: 768px)"在手机上），浏览器判定“不用它”，就异步加载 - CSS 文件里用了
@import：强制串行，main.css解析完才发起下一次请求，首屏样式链断裂 -
<link>是 JS 动态插入的（比如document.head.appendChild(link)），预加载器根本看不到它 - 服务端返回了错误的
Content-Type（如text/plain），浏览器拒绝解析，降级为非阻塞加载
验证是否真被阻塞：打开 DevTools → Network → 筛选css → 看Initiator列是不是parser；不是，说明没进阻塞链。
内联关键 CSS 是唯一绕过网络延迟的硬手段
所谓“关键 CSS”，是指首屏（above-the-fold）渲染必需的最小样式集合：比如.header布局、.hero字体与颜色、基础重置规则。把它直接写进<head>的<style>标签里，浏览器无需任何 HTTP 请求就能在首次绘制前应用样式。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须用
<style>，不能用<link>+rel="stylesheet" - 体积建议 ≤10KB（移动端保守值），否则可能阻塞 HTML 解析本身
- 别手动维护——用
critters（Vite）、critical（CLI）或 Next.js 内置工具自动生成，否则极易过期 - 内联部分只管首屏；非关键样式要明确隔离，比如用
media="print"+onload="this.media='all'"
preload 加载非关键 CSS 的正确写法
预加载本身不应用样式，只是提前发请求；漏掉任一要素就会失效：
- 必须带
as="style"：告诉浏览器这是样式资源，参与优先级调度 - 必须配
onload="this.rel='stylesheet'"：否则下载完也不会生效 - 必须加
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>：禁用 JS 时兜底 - 错误写法：
<link rel="preload" href="main.css">——缺as，浏览器当普通资源处理
注意：preload不解决内联缺失问题，它只是辅助手段；CDN 延迟高或文件体积大时，依然可能 FOUC。
深色/浅色模式切换最容易踩坑
靠DOMContentLoaded后读取localStorage再插入<link>，必然 FOUC。因为浏览器在解析 HTML 阶段根本不知道该加载哪个 CSS。
- 真正可靠的路径是让决策前移：服务端方案（通过
Sec-CH-Prefers-Color-Scheme请求头或 Cookie 输出带正确href的<link>） - 纯前端兜底仅限同步脚本：在
<meta charset>后立即用document.write()注入，但必须无async/defer，且不能用于 ESM 模块 - 禁用
document.write()动态注入主题 CSS——它只在解析阶段有效，且破坏模块化
最常被忽略的是：CSS 加载时机和 HTML 解析节奏是强耦合的，一旦 JS 或服务端逻辑把样式注入点往后推（哪怕只晚几毫秒），FOUC 就已经发生了。
