link标签放底部会延长白屏时间，因其将阻塞点推迟至DOM构建末期，导致页面空等更久；必须置于head中并按依赖顺序排列，配合media属性或preload+onload实现非关键CSS异步加载。

link标签放底部会让白屏更久，不是“晚点加载”而是“晚点开始阻塞”

浏览器解析 HTML 是流式进行的，<link rel="stylesheet"> 无论出现在哪，只要被解析到，就会立即触发 CSS 请求并阻塞后续 HTML 解析与渲染。放在 <body> 底部看似“延迟加载”，实则是把阻塞点拖到 DOM 构建快完成时——此时页面已空等许久，白屏时间反而拉长。

常见错误现象包括：DOMContentLoaded 延迟触发、首屏内容迟迟不出现、Lighthouse 报 “Eliminate render-blocking resources” 但你误以为是 CSS 太大而非位置问题。

• 浏览器会预扫描 <head> 中的 <link> 并提前发起请求；<body> 里的 <link> 不在预扫描范围内，请求发起更晚
• 即使 DOM 已构建完毕，CSSOM 未就绪，浏览器仍不会绘制任何内容，白屏持续到 CSS 下载+解析完成
• 部分旧版浏览器（如 IE）直接忽略 <body> 内的 <link rel="stylesheet">，样式彻底失效

为什么必须放在<head>里，且顺序不能乱

<link> 放在 <head> 是 HTML 规范强制要求，也是浏览器渲染机制决定的最优路径。它让关键资源尽早进入网络栈，配合 HTTP/2 多路复用可并行下载多个 CSS 文件。

但顺序直接影响样式优先级和变量可用性：

立即学习“前端免费学习笔记（深入）”；

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 重置类（如 reset.css）必须在基础变量（如 vars.css）之前，否则 :root 变量可能被覆盖或未定义
• 组件样式（如 button.css）应放在通用样式（如 layout.css）之后，避免规则被意外重置
• 如果用了 @import（应禁用），顺序错会导致串行加载链断裂，比如 A.css → @import "B.css" → @import "C.css"，B 加载失败则 C 永远不发请求

media 属性不是“加了就行”，写错等于没加

media 属性决定浏览器是否**立即加载并应用**该样式表。写成 media="screen" 或留空，等同于 media="all"，照样阻塞首屏；写成语法错误（如 media="not screen"），浏览器直接忽略该属性，退化为立即加载。

真正有效的写法需匹配实际使用场景：

• 打印样式：<link rel="stylesheet" href="print.css" media="print"> —— 浏览器异步加载，不参与首屏渲染
• 响应式断点外的样式：<link rel="stylesheet" href="desktop.css" media="(min-width: 768px)"> —— 移动端设备不会下载
• 暗色主题样式：<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)"> —— 仅系统启用暗色时加载
• 想完全延迟加载（如 JS 动态切换）：<link rel="stylesheet" href="theme.css" media="(min-width: 0)" onload="this.media='all'"> —— 初始不阻塞，JS 控制时机

preload + onload 动态插入才是非关键 CSS 的正确解法

对非首屏必需的 CSS（如后台管理页、弹窗组件、深页交互样式），<link rel="stylesheet"> 直接写死在 <head> 里仍是阻塞源。正确做法是用 <link rel="preload"> 提前获取资源，再通过 JS 动态切换为样式表。

关键细节：

• 必须加 as="style"，否则浏览器不会按 CSS 类型预加载
• 跨域 CSS（如 CDN）要加 crossorigin="anonymous"，否则 preload 可能静默失败
• onload 回调里要立刻执行 this.rel = 'stylesheet'，且建议加 this.onload = null 防止重复触发
• 务必保留 <noscript> fallback：<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

容易被忽略的是：HTTP/2 或 HTTP/3 虽能并行传输多个 <link>，但每个 rel="stylesheet" 仍独立阻塞渲染。优化重点永远是「减少阻塞资源数量」，而不是「让阻塞更快一点」。