FOUC是浏览器先渲染未样式化DOM再应用CSS导致的闪屏，并非单纯CSS加载慢；根本原因是HTML解析与CSS加载/解析时序竞争，关键在确保关键样式阻塞渲染。
什么是FOUC，以及它为什么不是CSS加载慢的问题
FOUC（Flash of Unstyled Content）不是CSS“没加载完”，而是浏览器在解析HTML过程中，**先渲染了未样式化的DOM，再应用CSS**。关键在于：HTML解析和CSS加载/解析存在时序竞争，尤其当CSS通过<link>异步加载、或被JS动态插入、或放在<body>里时，浏览器可能已开始构建渲染树并绘制文本内容。
把CSS放到<head>里还不够，必须阻塞渲染
仅把<link rel="stylesheet">放进<head>只是基础；真正起作用的是它的**默认同步阻塞行为**——浏览器会暂停HTML解析，直到该CSS资源下载并解析完成。但以下情况会破坏这个机制：
- 加了
media="print"或media="screen and (min-width: 768px)"等非匹配媒体查询，浏览器会异步加载，不阻塞 - 用了
rel="preload"但没配合as="style"和onload回填，只是预加载，不触发阻塞 - CSS文件本身返回了
Content-Type: text/plain（常见于本地开发误配服务器），浏览器拒绝解析，降级为异步
验证方式：打开DevTools → Network → 找CSS请求 → 看Initiator列是否为parser（表示被HTML解析器阻塞），而不是script或other。
内联关键CSS + 外链非关键CSS的实操分界点
“关键CSS”指首屏渲染必需的样式规则（如body、h1、导航栏、首屏卡片容器等），其余（如模态框、折叠面板、页面底部）可延迟加载。难点不在提取，而在判断哪些算“关键”：
立即学习“前端免费学习笔记（深入）”；
- 用
chrome://inspect→ Coverage tab录制首屏加载，筛选.css文件，看哪些规则实际被用到（通常<20KB） - 避免内联
@import、@font-face、复杂选择器（如article p:nth-child(2n+1)），它们可能触发重排或字体阻塞 - 内联CSS需用
<style>标签写在<head>顶部，且不能加media属性（否则失去阻塞能力）
示例：
<head>
<style>body { margin: 0; font-family: sans-serif; } .hero { height: 100vh; }</style>
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
</head>注意onload回填是必要步骤，否则media="print"始终不生效。
避免JS干扰样式加载顺序的三个硬约束
JS执行会暂停HTML解析，但如果它出现在CSS之前，或动态创建<link>，就可能打乱阻塞链：
- 所有
<script>标签（尤其defer或async）必须放在CSS<link>之后，否则JS执行期间CSS可能尚未就绪 - 禁用
document.write()注入CSS（已废弃，且必然导致FOUC） - 服务端渲染（SSR）中，若JS在
<head>里执行并修改document.head，要确保不覆盖或延迟关键<style>节点
一个易忽略点：fetch()加载CSS后用insertRule()注入，完全绕过浏览器的阻塞机制，必然FOUC——这种方案只适合主题切换等非首屏场景。
FOUC的本质是渲染流水线中“样式可用时间”与“首次绘制时间”的错位，优化核心就一条：让关键样式在第一个字节HTML解析完成前，已进入浏览器的CSSOM。任何试图用JS补救的方案，都晚于首屏绘制时机。
