FOUC是浏览器首次绘制前未获首屏关键样式的必然现象；唯一可控解法是将关键CSS（如.header、.hero等）内联至顶部标签，体积≤10KB、无media属性，并用critters等工具自动生成，非关键CSS则通过media="print" onload="this.media='all'"异步加载并配noscript兜底。
FOUC不是加载慢导致的偶然问题，而是浏览器在首次绘制前没拿到首屏必需样式规则的必然结果；真正可控的解法只有一个：把关键 CSS 内联进 <style></style> 标签，体积 ≤10KB、无 media 属性、且必须放在 最顶部。
为什么 <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()动态插入——这会让浏览器完全错过预加载时机
最容易被忽略的是：哪怕你把关键 CSS 内联了，如果外链 CSS 返回的 Content-Type 是 text/plain 而不是 text/css，浏览器会拒绝解析，FOUC 照常发生。
