浏览器对多个<link rel=”stylesheet”>标签的css加载是并行发起请求但顺序执行解析；CSSOM构建严格按HTML中link出现顺序进行，不因下载完成先后而改变。
多个 <link rel="stylesheet"> 标签的加载是串行还是并行？
浏览器对多个 <link> 标签的 CSS 加载默认是**并行发起请求**，但**阻塞渲染的顺序执行解析**。也就是说，资源下载可以同时进行，但 CSSOM 构建必须按 HTML 中出现的顺序完成——哪怕后一个文件体积小、先下载完，也得等前一个解析完才开始解析它。
- 关键点在于：CSS 是**渲染阻塞资源**，浏览器不会为提升速度而乱序构建样式树
- 如果
style2.css依赖style1.css里定义的自定义属性（如:root { --primary: #333; }），而它们被写成两个独立<link>，那顺序错了就直接失效 - http/2 下并行下载更明显，但顺序约束不变；HTTP/3 也不改变这一行为
rel="preload" 和 rel="stylesheet" 混用时为什么样式会闪动或丢失？
把 rel="preload" 用于 CSS 文件，只是提前拉取资源，并不触发解析；必须配合 onload 动态插入 <link rel="stylesheet"> 才真正生效。漏掉这步，或者插入时机不对，就会导致样式未及时应用。
- 常见错误：只写
<link rel="preload" href="main.css" as="style">，没后续逻辑 → 资源下了但不用，白忙活 - 正确做法是用
onload创建新<link>并 append 到<head>，否则它不会参与 CSSOM 构建 - 若 preload 的 CSS 插入位置在已有
<link>之后，它实际生效顺序就靠后，可能覆盖/被覆盖，得手动控制insertBefore
动态插入 <link> 时，disabled 属性和 media 查询如何影响加载与解析？
disabled 是个“软开关”：设为 true 会跳过解析，但**不取消已发出的网络请求**（chrome、firefox 均如此）；而 media 匹配失败时，不仅不解析，连请求都可能被跳过（取决于浏览器实现和 media 类型）。
-
<link disabled>后再设disabled = false，会立即触发解析（但不会重发请求） -
media="print"在屏幕浏览时通常不发请求；但media="(min-width: 1px)"这种永远为真的表达式，和不写media效果一致 - 想彻底阻止加载，别用
disabled，改用 js 动态创建标签 + 条件判断是否appendChild
内联 <style> 和外部 <link> 的优先级与层叠关系怎么算？
优先级不看“内外”，而看**在文档流中出现的顺序**。哪怕外部 CSS 文件体积大、加载慢，只要它的 <link> 出现在 <style> 标签之前，它的规则就排在前面参与层叠计算。
立即学习“前端免费学习笔记（深入）”；
- 注意：外部 CSS 解析完成前，内联
<style>可能已生效，造成短暂样式错乱（FOUC），这不是优先级问题，是时机问题 - 同一样式表里，后声明的规则覆盖先声明的；跨表时，以 HTML 中标签的物理顺序为准，跟文件大小、加载快慢无关
- 使用
@import会破坏这个顺序逻辑——它总是在所在样式表解析时才触发，且强制同步阻塞，应避免在<link>引入的 CSS 里用
真正难处理的是异步加载场景下人为打乱 dom 顺序，比如用 document.write 或框架的 head 管理器插入 <link>，很容易让本该靠前的样式表晚于内联样式挂载。这时候顺序就不可控了。