fouc是浏览器首次绘制前未获首屏关键样式的必然现象；唯一100%可控解法是将提取出的关键css（如.header、.hero等）内联至顶部的标签，体积≤10kb、无media属性，并用critters等工具自动生成；非关键css应通过media="print" onload="this.media='all'"异步加载并配noscript兜底。
FOUC 不是加载慢导致的偶然问题，而是浏览器在首次绘制前没拿到首屏必需样式规则的必然结果；唯一真正可控的解法是把关键 CSS 内联进 <style></style> 标签，体积 ≤10KB，且必须放在 最顶部。
为什么 <link rel="stylesheet"> 放在
放对位置只是触发阻塞的前提，不是充分条件。以下情况会让浏览器直接跳过阻塞逻辑：
-
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 内置工具自动生成，否则极易过期。内联块必须放在 最顶部，早于任何 <script></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()动态插入——这会让浏览器完全错过预加载时机
注意：onload 必须在插入 DOM 前绑定，否则 Safari 可能漏掉回调。
最容易被忽略的两个细节
一是 Content-Type 响应头。哪怕你把 CSS 内联了，如果外链 CSS 返回的是 text/plain 而非 text/css，浏览器会拒绝解析，降级为异步加载，FOUC 照常发生。
二是 Coverage 工具验证。靠猜不行。打开 Chrome DevTools → Coverage tab → 刷新页面 → 查看哪些 CSS 规则被实际执行（绿色高亮）。重点关注那些带复杂伪类、@import 导入链、CSS 变量定义或 @font-face 的规则——它们很可能不该进内联块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
