link必须放在<head>中才能触发阻塞式CSS加载、避免FOUC；放<body>里必然导致渲染异常，因浏览器流式解析时，<head>中的link会立即阻塞DOM构建直至CSSOM完成，而<body>中的link已错过最佳时机。
因为浏览器流式解析 HTML，link 放在 <head> 才能触发阻塞式 CSS 加载，避免 FOUC（无样式内容闪现）；放 <body> 里不是“偶尔失效”，而是必然导致渲染异常。
浏览器解析 HTML 时，link rel="stylesheet" 会立即阻塞 DOM 构建
只要解析器遇到 <link rel="stylesheet" href="style.css">，就会：发起请求 → 暂停后续 HTML 解析 → 等待 CSS 下载、解析、生成 CSSOM → 合并 DOM + CSSOM 成渲染树 → 开始绘制。这个机制只在 <head> 中可靠生效。
-
<head>里：解析器一读到就启动加载，DOM 构建全程等待，首屏样式一次性到位 -
<body>里：DOM 已推进到<h1>甚至<p>，再加载 CSS → 渲染树必须拆成两段构建，强制重排 - 哪怕
<link>写在<body>开头（紧贴<body>标签），也晚于<head>的大部分解析时机
rel="stylesheet" 缺失或拼写错误会导致静默失效
浏览器不报错，但根本不会把那个 <link> 当样式表处理——既不发请求，也不进 document.styleSheets 列表。
- 常见错误：
<link href="style.css">（漏rel）、rel="styleSheet"（大小写错）、rel="preload"（只是预加载，不应用） - 验证方法：打开 DevTools → Network 面板，看有没有
style.css请求；Elements 面板中<head>下有该标签，但 Styles 面板里没对应规则 → 八成是rel问题 -
type="text/css"可省略，现代浏览器默认识别rel="stylesheet"的href
路径错误和跨域限制会让 link “看起来有效实则无效”
HTTP 状态码 200 不代表样式可用：返回空文件、HTML 错误页、跨域 CSS（无 CORS 头）都会让 CSSOM 构建失败，但页面照样渲染，只是没样式。
立即学习“前端免费学习笔记（深入）”；
- 路径推荐用根相对路径：
href="/css/style.css"，避免以当前 HTML 文件为基准导致的 404 - 跨域 CSS：服务器没配
Access-Control-Allow-Origin，sheet.cssRules会为空，且控制台报SecurityError - 别在
<style>里写@import url(...)：它比<link>更慢、串行、无法预加载
即使 link 在 <head> 里，首屏仍可能白屏或闪动
放对位置只是基础条件，不能解决网络延迟带来的首屏空白。真正影响用户体验的是“关键 CSS 是否及时可用”。
- 内联首屏必需样式到
<style>标签中，体积 ≤14 KB，放在<head>最顶部 - 非关键 CSS 用
<link rel="preload" as="style" onload="this.rel='stylesheet'">异步加载（IE 需 fallback 脚本） - 检查是否被构建工具意外删掉了
<link>：比如某些 SSR 框架在服务端未注入，客户端 hydration 时才补上，导致初始渲染无样式
真正容易被忽略的点是：放对位置 ≠ 样式一定生效；link 在 <head> 里只是让浏览器“愿意等”，而等什么、等多久、等来的资源是否合法，全得靠路径、响应体、CORS、关键 CSS 提取这些环节兜住。
