将<link>放进<head>仍会FOUC，因media不匹配、@import串行加载、preload未配onload、Content-Type错误等会使阻塞失效；需用media="all"测试、内联关键CSS、加loading类并设超时兜底。
为什么把 <link> 放进 <head> 还会 FOUC
放对位置只是底线，不是充分条件。浏览器看到 <link rel="stylesheet"> 确实会默认阻塞 HTML 解析，但以下情况会让它“失效”：
-
media属性写成media="(min-width: 768px)"—— 浏览器判定当前不匹配，就异步加载，不阻塞渲染 - CSS 文件里用了
@import—— 它是串行、阻塞解析的，且无法被浏览器并发预加载 -
rel="preload"没配onload回填逻辑 —— 只是下载了，没触发样式应用 - CSS 返回了错误的
Content-Type（比如text/plain）—— 浏览器拒绝解析，降级为异步
验证方式：打开 DevTools → Network → 筛选 css → 看 Initiator 列是否为 parser；不是的话，说明没进入阻塞链。
media="all" 和 media 动态切换的实际用法
想让响应式 CSS 不破坏阻塞，又不想首屏加载全部样式，得用“先阻塞、后切换”策略：
- 初始
<link rel="stylesheet" href="main.css" media="print">——print是非匹配值，浏览器不阻塞，但会预加载 - 加
onload="this.media='all'"—— 加载完成后立刻激活，触发样式应用 - 必须在插入 DOM 前绑定
onload，否则 Safari/Firefox 可能漏掉回调 - 禁用所有
media条件临时测试：改成media="all"，看是否还闪 —— 这是快速定位问题的第一步
内联关键 CSS 的边界在哪
内联不是越多越好，关键是“首屏必需”：
立即学习“前端免费学习笔记（深入）”；
- 用 Chrome DevTools 的 Coverage tab 录制首屏加载，直接看哪些 CSS 规则被实际用到（通常只占全部 CSS 的 10%–30%）
- 避免内联复杂选择器，比如
article p:nth-child(2n+1)或带大量嵌套的 BEM 类 —— 它们可能触发重排或字体阻塞 - 内联必须用
<style></style>写在<head>顶部，不能加media属性，否则失去阻塞能力 - 内联后外链的非关键 CSS 要明确标记
media="print"并靠onload激活，否则仍可能干扰
用 loading 类控制显隐比等 DOMContentLoaded 更可靠
DOMContentLoaded 只代表 HTML 解析完，不代表 CSS 已就绪；而 FOUC 发生在样式未就绪时的渲染阶段：
- 初始就在
<html class="loading">上加类 - 对应 CSS 写成
.loading body { visibility: hidden; }—— 不要用display: none，避免 SSR/SEO 问题 - 每个
<link rel="stylesheet">插入前，都绑定link.addEventListener('load', () => { ... })，所有 load 完再移除loading类 - 必须加超时兜底：比如 5s 后强制移除
loading类，防止某条 CSS 失败卡死
最隐蔽的坑是：多个 <link> 并发加载时，只要其中任一文件解析失败（语法错误、@import 返回 404），整个样式链可能卡住，DOMContentLoaded 照常触发，但用户看到的就是 FOUC。
