link标签应紧贴meta charset和title后声明，按优先级排序；带media的可条件加载；preload+as=style可提前下载关键CSS；避免@import和跨域混排。
link 标签必须放在 里，但位置有讲究
浏览器解析 HTML 是从上到下流式进行的，<link rel="stylesheet"> 放在 开头或结尾，实际加载行为没区别——它都会阻塞后续渲染，直到 CSSOM 构建完成。但放错位置会放大阻塞影响。
常见错误是把 <link> 放在 <script></script> 后面，尤其当脚本没加 defer 或 async 时，会导致「CSS 加载被 JS 执行卡住」；反过来，如果 JS 依赖样式计算（比如读取 getComputedStyle），又可能因 CSS 没就绪而报错。
-
<link>应紧贴<meta charset>和<title></title>之后，越早声明越好 - 避免穿插在多个
<script></script>中间，尤其非异步脚本 - 多个
<link>按优先级排序：基础重置（reset.css）→ 通用工具类（utils.css）→ 页面专属（page.css）
media 属性不是摆设，用对能跳过阻塞
带 media 的 <link> 在媒体查询不匹配时，浏览器不会阻塞渲染，也不会下载资源（现代浏览器如 Chrome、Firefox 均已支持）。这是实现「条件加载」最轻量的方式。
比如打印样式、深色模式、宽屏布局，都可以用它提前声明但不立即加载：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="wide.css" media="(min-width: 1200px)">
注意：media 值必须是有效媒体查询，写成 media="screen" 或 media="all" 等同于无条件加载，起不到优化作用。
preload + as=style 组合能提前触发下载
仅靠 <link rel="stylesheet"> 无法突破「HTML 解析到该标签才开始下载」的限制。想让关键 CSS 更早发起请求，得用 <link rel="preload"> 提前声明，再配合 as="style" 让浏览器正确设置请求优先级和 CORS 行为。
- 必须同时指定
rel="preload"、as="style"、href，缺一不可 - 不能省略
onload回调，否则预加载完不会自动应用样式 - 建议只对首屏强依赖的 CSS 文件使用，比如
critical.css
典型写法：
<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="critical.css"></noscript>
多个外部 CSS 文件的实际加载顺序很关键
浏览器按 <link> 在 HTML 中出现的顺序依次下载并解析，后一个 CSS 的规则会覆盖前一个同名选择器的声明——但「下载完成时间」不一定按序。网络抖动、CDN 节点差异、HTTP/2 多路复用都可能导致乱序就绪。
这意味着：不能假设 base.css 一定比 theme.css 先可用；也不能靠文件体积小就默认它先加载完。
- 关键样式（如字体、排版基线）应单独抽成最小文件，用
preload保底 - 避免跨域
<link>和同域混排，跨域请求受 CORS 策略和预检影响，延迟更不可控 - HTTP/2 下多个小 CSS 并不比合并成一个快多少，反而增加 TCP 连接管理开销；真正要优化的是首屏 CSS 的传输体积和解析耗时
最易被忽略的一点：CSS 文件内部的 @import 会引发额外的串行请求，且无法被 preload 提前捕获——只要还存在 @import，就等于主动放弃了加载控制权。
