必须放在 中，这是避免白屏和fouc的唯一正确位置；它确保cssom与dom同步就绪、触发预加载、支持媒体查询异步加载，并保障内联样式与外部样式的正确覆盖顺序。

<link rel="stylesheet"> 必须放在 里，不是“最快”，而是“唯一能避免白屏和 FOUC 的位置”。放别处看似省时间，实则破坏渲染流水线，用户看到的是闪、抖、空白——这不是快，是错。

为什么放在 才算真正“快”

浏览器边解析 HTML 边构建 DOM，但一遇到 <link rel="stylesheet"> 就会暂停解析，等 CSS 下载 + 解析完才继续。这个阻塞行为本身不可绕过，但位置决定了它“卡在哪”：

• 放在 ：阻塞发生在 DOM 构建早期，CSSOM 和 DOM 同步就绪，后续渲染一步到位
• 放在 底部：HTML 已解析大半、DOM 已构建完成，但样式还没来——浏览器只能先用默认样式画一遍（白屏/乱排版），等 CSS 到了再重绘一次
• 旧版 IE 甚至直接拒绝渲染，全程白屏；现代浏览器虽能渐进渲染，但 FOUC 仍肉眼可见

<link> 放在 里还带来三个实际加速点

这些不是“理论优势”，是真实可测的加载收益：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 预加载扫描器（preload scanner）会在 HTML 解析初期就发现 中的 href，提前发起 CSS 请求，比 JS 动态插入早几百毫秒
• 支持 rel="preload" as="style"：只有 里的 <link> 才被识别为预加载目标
• 媒体查询（media="print" 或 media="(max-width: 768px)"）可让非关键 CSS 异步加载，不阻塞主流程——但前提是它得在 里声明

那些“想快却放错位置”的常见操作

以下做法看似优化，实则引入新问题：

• 把 <link> 拖到 开头或中间：Network 里 HTML 耗时短，但 DOMContentLoaded 延迟严重，且 Elements 面板能看到 DOM 已建好、Styles 面板却空着
• 用 @import 在 CSS 文件里引入其他 CSS：请求串行化，Network 显示阶梯式加载，无法被预加载器识别，首屏 CSS 加载链拉长
• 路径写成 ./css/main.css 或漏写 rel="stylesheet"：无报错，但 CSS 静默失效——Elements 有标签，Network 没请求，Styles 面板为空

真正提速的关键不在“放哪”，而在“放什么”

放在 是底线，但决定首屏速度的，是里面装的内容：

• 首屏关键 CSS（如 .header、.hero、字体声明）应内联进 <style></style>，gzip 后控制在 4–8KB；体积过大反而拖慢 HTML 解析
• 非首屏 CSS（如评论区、页脚、打印样式）用 media="not all" 初始化，需要时再切回 media="all"，避免初始阻塞
• 所有外部 CSS 路径必须用根相对路径（/css/main.css），避免因 base URL 或路由变化导致 404 静默失败

最易被忽略的其实是“顺序”：内联 <style></style> 必须在所有 <link> 之前，否则外部 CSS 可能覆盖关键内联样式；而 rel="preload" 的 <link> 又必须在普通 <link> 之前，否则预加载无效。这些细节不报错，但一上线就卡首屏。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！