link 标签并行下载且阻塞渲染，@import 串行执行、延迟触发，导致样式可用时间显著延后；关键 CSS 应内联，非关键 CSS 用 media 属性或动态加载规避阻塞。
link 标签引入 vs @import 导入，加载时机完全不同
<link rel="stylesheet"> 是并行下载、阻塞渲染的常规方式；@import 则是串行执行、延迟触发——它必须等外层 CSS 或 HTML 解析到该语句才开始请求，甚至可能等到 DOM 构建中途。这意味着 @import 在 <style></style> 块或外部 CSS 文件中使用时，会显著拖慢样式可用时间。
- 在
中用@import url("a.css")，浏览器仍需先下载并解析 HTML，再处理该语句，无法与 HTML 解析并发 - 在已加载的 CSS 文件里写
@import "b.css"，b.css会等到父文件解析完成才发起请求，形成「链式延迟」 - 多数现代构建工具（如 Webpack、Vite）默认不支持
@import跨文件提取，容易导致重复打包或运行时请求
内联 style 标签对首屏有加速作用，但不可滥用
把关键 CSS（Critical CSS）内联进 <style></style> 标签，能避免一次 HTTP 请求，让浏览器无需等待网络就可计算样式和布局。这对首屏内容渲染速度提升明显，尤其在弱网或高 RTT 场景下。
- 只应内联「首屏可见区域」必需的规则，比如导航栏、标题、首张卡片的样式；全量内联反而增大 HTML 体积，延长 HTML 解析和首次字节传输时间
- 服务端渲染（SSR）或静态站点生成（SSG）场景下，可通过工具（如
critters、purgecss+inline-critical）自动提取并注入 - 注意：内联 CSS 不会被浏览器缓存，每次 HTML 更新都会重新传输，不适合频繁变动的大样式块
preload 预加载 CSS 能提前触发下载，但不改变执行顺序
用 <link rel="preload" as="style" href="main.css"> 可让浏览器在 HTML 解析早期就发起 CSS 请求，但它本身**不应用样式**；必须配合一个无 media 的 <link rel="stylesheet"> 才能生效，否则样式不会被解析。
- 常见错误：只写
preload而漏掉后续的stylesheetlink，结果资源下载了却没生效 - 更安全的写法是：
<link rel="preload" as="style" href="main.css" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="main.css"></noscript>
- 预加载对跨域 CSS 需要
crossorigin属性，否则可能被浏览器忽略
HTTP/2 和 HTTP/3 下，多个小 CSS 文件的影响变小，但渲染阻塞逻辑不变
HTTP/2 多路复用能缓解「多个 link 标签导致的连接数压力」，但每个 rel="stylesheet" 依然会阻塞 HTML 解析和页面渲染，直到其内容下载并解析完成。也就是说，协议升级改善的是传输效率，不是资源依赖模型。
立即学习“前端免费学习笔记（深入）”；
- 拆分 CSS（如
base.css、theme.css、component.css）有利于按需加载或缓存复用，但若全部标记为stylesheet，仍会全部阻塞渲染 - 非关键 CSS 应用
media属性（如media="print"或media="(min-width: 1024px)"），使其变为「非阻塞」，浏览器仅在条件匹配时才下载解析 - 动态加载（
loadCSS()模式）仍是绕过阻塞最直接的方式，但需手动控制加载时机与 DOM 就绪关系
@import 可能多出几百毫秒的链式等待，而一段错放的内联 CSS 可能让 gzip 后的 HTML 大小翻倍——这些细节比「选对方法」更影响实际体验。 
