link标签放底部会延长白屏时间，因其将阻塞点推迟至dom构建末期，导致页面空等更久；必须置于head中并按依赖顺序排列，配合media属性或preload+onload实现非关键css异步加载。
link标签放底部会让白屏更久，不是“晚点加载”而是“晚点开始阻塞”
浏览器解析 HTML 是流式进行的，<link rel="stylesheet"> 无论出现在哪，只要被解析到，就会立即触发 CSS 请求并阻塞后续 HTML 解析与渲染。放在 底部看似“延迟加载”，实则是把阻塞点拖到 DOM 构建快完成时——此时页面已空等许久，白屏时间反而拉长。
常见错误现象包括：DOMContentLoaded 延迟触发、首屏内容迟迟不出现、Lighthouse 报 “Eliminate render-blocking resources” 但你误以为是 CSS 太大而非位置问题。
- 浏览器会预扫描
中的<link>并提前发起请求；里的<link>不在预扫描范围内，请求发起更晚 - 即使 DOM 已构建完毕，CSSOM 未就绪，浏览器仍不会绘制任何内容，白屏持续到 CSS 下载+解析完成
- 部分旧版浏览器（如 IE）直接忽略
内的<link rel="stylesheet">，样式彻底失效
为什么必须放在里，且顺序不能乱
<link> 放在 是 HTML 规范强制要求，也是浏览器渲染机制决定的最优路径。它让关键资源尽早进入网络栈，配合 HTTP/2 多路复用可并行下载多个 CSS 文件。
但顺序直接影响样式优先级和变量可用性：
- 重置类（如
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"），浏览器直接忽略该属性，退化为立即加载。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
真正有效的写法需匹配实际使用场景：
- 打印样式：
<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"> 直接写死在 里仍是阻塞源。正确做法是用 <link rel="preload"> 提前获取资源，再通过 JS 动态切换为样式表。
关键细节：
- 必须加
as="style"，否则浏览器不会按 CSS 类型预加载 - 跨域 CSS（如 CDN）要加
crossorigin="anonymous"，否则 preload 可能静默失败 - onload 回调里要立刻执行
this.rel = 'stylesheet'，且建议加this.onload = null防止重复触发 - 务必保留
<noscript></noscript>fallback：<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
容易被忽略的是：HTTP/2 或 HTTP/3 虽能并行传输多个 <link>，但每个 rel="stylesheet" 仍独立阻塞渲染。优化重点永远是「减少阻塞资源数量」，而不是「让阻塞更快一点」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
