多个link标签默认并行下载但顺序解析，CSSOM构建严格按HTML中出现顺序执行，前一个未完成解析则后一个无法启动，确保样式安全与变量依赖正确。
多个 <link rel="stylesheet"> 确实能并行下载，但不是“谁快谁先用”
浏览器对多个 <link rel="stylesheet"> 标签默认发起并行请求，但 CSSOM 构建（即样式解析与应用）严格按 HTML 中出现顺序执行。哪怕 theme.css 比 base.css 小、先下载完，也得等 base.css 解析完毕才开始解析 theme.css。
这背后是渲染安全机制：CSS 是阻塞渲染的关键资源，乱序构建 CSSOM 可能导致样式错乱或自定义属性（如 var(--color)）未定义就引用。
- HTTP/2 和 HTTP/3 下并行更明显，但顺序约束不变
- 若
theme.css依赖base.css里的:root变量，顺序写反 → 运行时计算失败，控制台无报错，只表现为样式不生效 - 开发者工具的 “Computed” 面板里点属性值旁的文件名，能确认实际生效来源——别只信文件名，要查真实声明位置
@import 在 CSS 文件里会打断并行，串行加载链一环扣一环
把 @import 写在外部 CSS 文件中（比如 main.css 里有 @import "reset.css";），等于把下载时机从 HTML 解析阶段推迟到该 CSS 文件被下载并解析到那一行时。结果就是：主 CSS 下完 → 开始解析 → 遇到 @import → 发起新请求 → 等它下完 → 再解析……形成强串行链。
- 多个
@import写在同一文件内，仍是顺序执行，无法并行 - IE6–8 对连续
@import有额外 bug：可能跳过后续规则，或解析中断 - 就算用
<style>@import "a.css"; @import "b.css";</style>，浏览器仍按顺序发起请求，不是并发
media 属性能让部分 <link> 跳过下载，但断点写错反而多下一份
media 不是“延迟加载”，而是“条件触发”。浏览器在解析 <link> 时就评估 media 查询，若不匹配（如 media="(max-width: 768px)" 但当前视口是 1024px），多数现代浏览器会直接跳过网络请求——连 TCP 连接都不建。
立即学习“前端免费学习笔记（深入）”；
但断点设计极易出错：
-
mobile.css用(max-width: 768px)，tablet.css用(min-width: 768px)→ 宽度 = 768px 时两者都匹配，同时下载 - 正确写法应留间隙或用
and组合：(min-width: 320px) and (max-width: 767px)+(min-width: 768px) and (max-width: 1023px) -
media="print"类资源通常不下载（除非用户打开打印预览），但若误配成media="screen"或漏写，则失去条件控制意义
rel="preload" 不等于 rel="stylesheet"，漏掉 onload 插入就会白下
<link rel="preload" as="style" href="main.css"> 只是提前拉取资源，不参与 CSSOM 构建。它不会阻塞渲染，也不会自动应用样式——必须手动创建 <link rel="stylesheet"> 并插入 DOM 才真正生效。
- 常见错误：只写 preload，没写
onload回调或动态插入逻辑 → 文件下了，页面没样式，FOUC 明显 - 插入位置影响层叠顺序：若插在已有
<link>后面，它的规则优先级更高；插在前面则可能被覆盖 -
crossorigin属性对字体等资源是强制的，但对普通 CSS 是可选的；不过若服务端返回了 CORS 头，而标签没加crossorigin，Chrome 会拒绝应用该样式表
真正容易被忽略的是：并行下载能力取决于“发现时机”而非“书写位置”。把 <link> 放在 <head> 靠前位置，才能让浏览器尽早发现并调度；放太靠后，即使并行机制存在，也会错过关键调度窗口——尤其对 LCP 图片或首屏 CSS 来说，差几百毫秒就可能卡在慢网阈值上。
