<link rel="stylesheet">必须放在<head>内，否则会触发FOUC、布局错位、媒体查询失效及SSR hydration失败；浏览器解析时遇该标签立即阻塞DOM构建并加载CSSOM，放<body>中则导致重绘。
link rel="stylesheet" 会阻塞 DOM 构建，但不阻塞 HTML 解析
浏览器流式解析 HTML 时，遇到 <link rel="stylesheet"> 会立即发起 CSS 请求，并**暂停 DOM 树构建**，直到该 CSS 下载完成、解析出 CSSOM 后才继续。注意：它不阻塞 HTML 字节流的读取和 tokenization（即“解析”还在进行），但 DOM 节点无法生成——这意味着 <body> 里的元素哪怕已出现在 HTML 中，也不会被加入 DOM 树。
常见错误现象：
- DevTools Elements 面板里看不到
<body>内容，Network 面板显示 CSS 请求卡在 pending 或耗时长 - 首屏白屏超 1s，Performance 面板中 Layout 阶段长时间等待 “CSSOM ready”
-
document.querySelector在脚本中返回null，只因目标元素尚未被插入 DOM
实操建议：
- 把关键 CSS 提取为内联
<style>放在<head>最顶部，控制体积 ≤8 KB（gzip 后） - 非关键 CSS 加
media属性，如media="(min-width: 1024px)"，让其异步加载不阻塞 - 禁用
@import：它在 CSS 文件内串行加载，实际顺序不可控，且无法被preload提前拉取
link 放在 body 里不会报错，但会触发 FOUC 和重绘
<link rel="stylesheet"> 放在 <body> 中是合法 HTML，但浏览器不会因此改变行为逻辑：它仍会下载并解析 CSS，只是此时 DOM 已部分渲染甚至已绘制，导致样式“后装”。用户肉眼可见文字跳变、按钮错位、@media 失效。
立即学习“前端免费学习笔记（深入）”；
典型表现：
- 首屏文字先用系统字体崩出来，几百毫秒后才换成
font-family: "Inter" -
display: flex容器子元素先堆成一列，再突然排成一行 - 移动端滚动卡顿，因为重绘触发频繁，且 layout 计算被反复打断
为什么不能靠“放后面”来绕过阻塞？
- FOUC 不是 bug，是设计结果：浏览器无法回退已绘制的内容
- SSR hydration 失败风险高——React/Vue 的客户端水合依赖 CSSOM 就绪，否则样式错乱无法修复
- JS 执行可能依赖
getComputedStyle，而该 API 在 CSSOM 未就绪时返回默认值，逻辑出错
preload + onload 切换不是自动生效，必须手动控制顺序
<link rel="preload" as="style" href="main.css" onload="this.rel='stylesheet'"> 这种写法常被误认为“一键异步加载 CSS”，但它只解决下载时机，**不解决注入顺序**。如果该标签放在其他 <link rel="stylesheet"> 之后，即使提前下完，也会晚于前面的样式表被注入 CSSOM，覆盖逻辑就被打乱。
容易踩的坑：
- 没配对使用：
preload只下载，不解析；漏掉onload或写错为onload="this.setAttribute('rel', 'stylesheet')"（IE 不支持onload，需 fallback） - 插入位置错误：把它放在
<head>底部，导致关键基础样式（如 reset.css）反而后加载 -
as="style"写错成as="script"或as="fetch"：资源下了，但进不了 CSSOM，等于白忙
实操建议：
- 关键样式必须用内联
<style>或顶部<link rel="stylesheet">，确保最先注入 - 预加载的非关键 CSS，
<link rel="preload">必须放在对应<link rel="stylesheet">原位置，再用 JS 切换 - 用 Chrome DevTools → Network 面板确认 CSS 请求是否真正提前发起，而非仅靠标签存在判断
rel 属性拼错或缺失会导致 link 完全静默失效
<link href="base.css"> 没写 rel，或写成 rel="style"、rel="css"，浏览器直接当普通链接处理——不阻塞、不解析、不注入 CSSOM，DevTools 里也看不到请求（除非你主动用 fetch 触发）。这种错误没有报错，只有样式丢失，排查成本极高。
其他静默失败原因：
-
href路径 404 或返回空响应：Network 面板看状态码和响应体，别只盯 Elements -
<link>被嵌套在<script>或<meta>里，不是<head>的直接子元素：HTML 解析器忽略 - 服务器返回
Content-Type: text/plain而非text/css：现代浏览器会拒绝解析（可查 Response Headers）
检查优先级顺序永远高于路径或压缩优化：先确认 rel="stylesheet" 存在且拼写正确，再查网络、再查内容。
最常被忽略的一点：CSS 加载时机由 <link> 的位置和 rel 值共同决定，不是“放对地方就万事大吉”。一个拼错的 rel，比放错位置更难定位，因为它不报错、不警告、不触发任何可观测事件。
