CSS应放在<head>内且紧贴<title>前，因浏览器流式解析HTML时遇<link rel="stylesheet">会暂停解析、阻塞渲染直至CSSOM构建完成；若置于<body>则导致FOUC（无样式内容闪现）、重排重绘，旧版Safari甚至忽略该链接。
为什么必须放在靠前位置
浏览器流式解析 HTML，遇到 <link rel="stylesheet"> 会立即发起请求，并**暂停 HTML 解析**，直到 CSSOM 构建完成。如果它被丢到 <body> 里，页面可能先渲染出无样式的文字或图片，等 CSS 加载完再重排重绘——用户看到的就是“闪动”。更糟的是，旧版 Safari 可能直接忽略 <body> 中的样式链接。
✅ 正确写法：<head> 内、<meta charset> 后、<title> 前；
❌ 错误写法：<body><link rel="stylesheet" href="main.css"></body>；
⚠️ 注意：media 属性如 media="(max-width: 768px)" 或 media="print" 可让它变成非阻塞，但不匹配时资源根本不会发请求，不能当兜底方案。
preload 关键 CSS 时 as 和 crossorigin 怎么配才不静默失效
<link rel="preload"> 不是加了就快，而是加对了才起作用：它只对“浏览器发现太晚但首屏立刻要用”的资源有效，比如内联 <style> 里引用的 background-image，或者紧跟 <script type="module"> 的主样式 chunk。漏配 as 或 crossorigin，优先级会掉到 Low，等于白写。
-
as="style"→ 必须配onload="this.onload=null;this.rel='stylesheet'"，否则只下载不生效 -
as="font"→ 必须加crossorigin（哪怕同源），否则控制台报Failed to decode downloaded font或静默失败 -
as="image"→ 不支持srcset或sizes，只适合确定尺寸/格式的单图；对普通<img src>无效 -
href必须与最终实际加载的 URL 完全一致（含查询参数），否则缓存不命中
内联关键 CSS 的边界和陷阱
内联 <style> 是绕过网络请求的最快方式，但只适用于真正首屏必需的样式——比如导航栏、标题、首屏按钮的布局与颜色。折叠区、弹窗、分页栏等非首屏模块的样式不该塞进去。
立即学习“前端免费学习笔记（深入）”；
✅ 推荐做法：用 Chrome DevTools 的 Coverage 面板识别未使用 CSS，工具如 crtters（Vite/webpack 插件）或 Penthouse 自动提取并内联；体积建议 ≤ 10KB，否则 HTML 本身变大反而拖慢传输。
❌ 绝对禁止：<style> 里写 @import——它会触发额外请求，彻底破坏内联意义；内联后没移除对应外链的 <link rel="stylesheet">，导致样式重复应用、意外交互。
哪些地方绝对不能用 @import
@import 是串行阻塞加载，比 <link> 多一次往返，且无法被预加载。写在 <style> 里或外部 CSS 文件中，都会让浏览器等前一个资源加载完才发起下一个请求。
常见错误现象：关键 CSS 加载延迟 >300ms，FCP 指标明显恶化；DevTools Network 面板里看到多个串行的 CSS 请求。
✅ 替代方案：用多个 <link rel="stylesheet"> 并行加载；或把主题色变量等动态内容直接注入 <style>；
⚠️ 唯一合理场景：邮件模板——因为 Outlook 等客户端只认内联样式，且会 strip 掉 <style> 和外部链接。
preload 的 href 若没配好 Cache-Control: public, max-age=31536000，浏览器可能反复请求同一字体；又比如 fetchpriority="high" 对 CSS 完全无效，但它和 loading="eager" 在 <img> 上叠加时，会触发 Chrome 的降级逻辑——这些细节不验证，光改 HTML 标签没用。 
