样式表应放在中以避免fouc，因在底部会导致无样式闪现、布局跳动；虽非语法强制，但为保障首屏渲染正确性，关键css需内联或预加载。
样式表放在
浏览器解析 HTML 是从上到下流式进行的。当遇到 <link rel="stylesheet"> 时，会触发 CSS 加载与解析，并**阻塞后续 HTML 解析和渲染（直到 CSSOM 构建完成）**。如果把它放在 底部，虽然 HTML 可先解析完，但页面会在 CSS 加载前以无样式状态（FOUC）短暂闪现，尤其在慢网或大 CSS 文件下更明显。
所以“必须放头部”不是语法限制（HTML 允许 <link> 出现在 ），而是为避免不可控的渲染异常。
<link> 放在
常见错误现象包括：文字先以浏览器默认样式显示（如黑色小号字体），等 CSS 加载后突然变大、变色、换行；按钮位置跳动；布局塌陷后又撑开。这是因为：
- CSS 加载前，浏览器仅用 HTML 结构生成 DOM，但无法构建 CSSOM，因此无法计算样式和布局
- 一旦 CSS 加载完成，会立即触发全量样式计算 + layout + paint，造成视觉突变
- 部分浏览器（如旧版 Safari）甚至可能拒绝应用
中的<link>样式规则
现代替代方案：用 media 或 onload 控制加载时机
如果真有“非得晚点加载”的需求（比如仅用于打印的样式、暗色主题切换、懒加载组件专属 CSS），可用以下方式降低影响：
立即学习“前端免费学习笔记（深入）”；
- 用
media="print"或media="(max-width: 768px)"让浏览器异步加载，不阻塞初始渲染 - 动态插入
<link>并监听onload，配合document.styleSheets确认就绪后再激活对应 UI - 对关键首屏样式，仍应内联在
中（<style></style>），其余非关键 CSS 用rel="preload"提前获取，再用 JS 注入
示例：
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
服务端渲染（SSR）或框架中容易忽略的细节
像 Next.js、Nuxt 这类框架默认把 CSS 提取并注入 ，看似安全，但要注意：
- 若组件级 CSS（如
styled-components的StyleSheetManager）依赖运行时注入，服务端未生成 style 标签，客户端首次渲染仍可能 FOUC - 使用
critical CSS工具提取首屏样式时，遗漏了伪类（:hover）、媒体查询断点或字体加载逻辑，会导致交互瞬间失样 - HTTP/2 推送已弃用，别再依赖它“提前推 CSS”，优先优化
<link>的as和fetchpriority属性
真正影响用户体验的，从来不是“能不能放底部”，而是“用户第一眼看到的内容有没有被样式正确约束住”。这点比代码组织习惯重要得多。
