FOUC是浏览器首次绘制前未获关键样式的必然现象；唯一100%可控解法是内联首屏必需CSS到<head>顶部<style>标签（≤10KB、无media属性），非关键CSS须preload+onload或media隔离。
FOUC不是“可能”发生，而是只要关键CSS没在首次绘制前就绪，它就一定会发生；唯一真正可控的解法是内联首屏必需样式，其余必须配合预加载与媒体隔离。
为什么放在
放对位置只是触发阻塞的前提，不是充分条件。以下情况会让浏览器直接跳过阻塞逻辑：
-
media值不匹配当前环境（如media="(min-width: 768px)"在手机上），浏览器判定“不用它”，就异步加载 - CSS文件里用了
@import：强制串行，main.css解析完才发起下一次请求，首屏样式链断裂 -
<link>是JS动态插入的（比如document.head.appendChild(link)），预加载器根本看不到它 - 服务端返回了错误的
Content-Type（如text/plain而非text/css），浏览器拒绝解析，降级为非阻塞加载
验证是否真被阻塞：打开 DevTools → Network → 筛选css → 看Initiator列是不是parser；不是，说明没进阻塞链。
怎么正确内联关键CSS
内联不是把整个main.css复制进去，而是提取首屏必需的最小样式集合（如.header、.hero、基础重置、字体定义），并满足三个硬约束：
立即学习“前端免费学习笔记（深入）”；
- 必须用
<style></style>，不能用<link rel="stylesheet"> - 体积≤10KB（移动端保守值），否则可能阻塞HTML解析本身
- 不能加
media属性（如media="(prefers-color-scheme: dark)"），否则浏览器跳过阻塞
别手动维护——用critters（Vite插件）、critical（CLI）或 Next.js 内置工具自动生成，否则极易过期。内联块必须放在<head>最顶部，早于任何<script>或<link>。
非关键CSS怎么安全加载不干扰首屏
内联只解决首帧有样式，后续样式仍要加载。但直接放<link rel="stylesheet">可能因体积大或CDN延迟导致回流重绘。更稳妥的做法是让它“预加载但不阻塞”：
- 推荐写法：
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">，利用media="print"让浏览器预加载但不应用，加载完成再切换 - 必须配
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>兜底，防JS失效 - 避免在JS里用
document.write()或appendChild()动态插入——这会让浏览器完全错过预加载时机
最容易被忽略的两个细节：一是Content-Type响应头，哪怕你把CSS内联了，如果外链CSS返回的是text/plain而非text/css，浏览器会拒绝解析，FOUC照常发生；二是href路径基准算错，比如HTML在/blog/post.html却写href="css/button.css"，实际请求的是/blog/css/button.css，Network面板看到404基本就是它。
