link 必须放在 head 中才能确保 cssom 在 dom 构建完成前就绪，避免 fouc 和布局重排；但仅放 head 不够，还需验证 css 加载状态、内联关键样式、监听 link load 事件等兜底措施。
浏览器解析 HTML 时，link 放在 head 才能触发 CSSOM 构建前置
不是“放 head 就自动生效”，而是浏览器必须先完成 CSSOM（CSS Object Model）构建，才能和 DOM 合并成渲染树（Render Tree）。link 标签一旦出现在解析流中，且 rel="stylesheet"，浏览器就会立即发起请求、阻塞后续 DOM 构建，直到该 CSS 下载、解析、生成 CSSOM 完毕。
如果 link 写在 body 里，DOM 解析已推进到内容节点，此时才开始加载 CSS —— 意味着：页面可能已输出未样式化文本，FOUC（Flash of Unstyled Content）几乎必然发生；更糟的是，某些样式（如 display: none 或 font-family）若延迟应用，还会导致布局重排或文本回流重绘。
-
link在head中 → 解析器一遇到就启动 CSS 加载，DOM 构建暂停等待 CSSOM -
link在body中 → DOM 已构建部分节点，再加载 CSS → 渲染树无法一次性生成，只能增量更新 - 即使使用
media="print"等非关键媒体类型，link仍会触发预连接（preconnect），但不会阻塞渲染；而media="screen"（默认）或media="all"一律阻塞
link 放 head 但样式仍不生效？检查这三件事
常见现象是 HTML 结构正确、link 也在 head 里，但元素没渲染出预期样式。这不是位置问题，而是资源链路或执行时机断开了。
- 用 DevTools 的
Network面板确认 CSS 文件返回状态码是200，且响应体含有效 CSS 规则（不是 404、空文件或 HTML 错误页） - 检查是否被
@import拖累：@import在<style></style>块内是同步阻塞的，且无法并行下载，比link更慢；应避免在内联<style></style>中写@import url(...) - 运行
document.styleSheets查看长度，再逐个检查sheet.cssRules是否为空或报SecurityError（跨域 CSS 不允许 JS 访问规则）
关键 CSS 必须内联，link 放 head 只是基础条件
把 link 放 head 能保证“样式早于内容加载”，但不能解决“首屏样式等 CSS 文件”的本质延迟。网络往返、TLS 握手、服务器响应时间，都会让外部 CSS 至少延迟几百毫秒。
- 首屏必需样式（如 header 高度、按钮颜色、字体声明）必须提取出来，用
<style></style>内联在最顶部，且放在所有link之前 - 内联 CSS 体积建议 ≤14 KB，否则影响 TTFB（Time to First Byte）和 TCP 初始拥塞窗口利用
- 剩余非关键 CSS 用
<link rel="preload" as="style" onload="this.rel='stylesheet'">异步加载，注意 IE 不支持onload，需 fallback
脚本执行时读取样式，link 位置错误会导致 getComputedStyle 返回初始值
很多初始化逻辑依赖 getComputedStyle(el).color 或 el.offsetHeight，但如果脚本在 DOMContentLoaded 触发时执行，而 CSS 还没加载完，这些 API 就会返回未应用样式的计算结果（比如 color: rgb(0, 0, 0) 即使你设了 #ff6b35）。
- 不要假设
DOMContentLoaded时样式已就绪；它只代表 DOM 解析完成，不保证 CSSOM 就绪 - 安全做法是监听
document.addEventListener('readystatechange', () => { if (document.readyState === 'complete') { ... } })，或用requestAnimationFrame延迟到下一帧（此时渲染树大概率已生成） - 更可靠的方式：在
link上监听load事件（link.onload = () => { /* 初始化 */ }），但注意它不冒泡，且仅对成功加载触发
关键点不在“放哪”，而在“浏览器是否已把那条规则放进 CSSOM 并参与了首次渲染树合成”——位置只是起点，验证和兜底才是落地的最后一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
