link触发并行下载，@import强制串行阻塞：前者在html解析时立即发起请求，支持preload、media条件加载及js动态插入；后者需等父样式表下载解析完才请求，不支持任何优化机制，弱网下首屏延迟可达800ms+。
link 触发并行下载，@import 强制串行阻塞
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会立即发起网络请求，并与其他资源（JS、图片）并行下载；而 @import 是 CSS 规则，必须等父样式表下载完成、解析到该行才开始下一个请求——这形成隐式依赖链，无法跳过。
常见错误现象：a.css 里写 @import url("b.css"); @import url("c.css");，结果是 b 下完 → 解析 → c 下完 → 解析，总耗时接近三者之和。即使在内联 <style></style> 中写多个 @import，浏览器仍按顺序执行，无法并行。
- 实测数据（Chrome DevTools Network 面板，3G 模拟）：5 个 CSS 文件全用
<link>加载比嵌套 4 层@import快 300–600ms - 弱网下首屏渲染延迟可达 800ms+，尤其影响 LCP 指标
-
@import会干扰浏览器对关键 CSS 的提取逻辑，可能导致关键样式延迟应用
link 支持 preload 和 media 条件加载，@import 完全不支持
<link> 可通过 rel="preload" 提前拉取关键 CSS，或用 media 属性跳过不匹配条件的下载；@import 即使带媒体查询（如 @import url("mobile.css") screen and (max-width: 768px);），也会无差别发起 HTTP 请求，只是不应用规则——浪费带宽。
使用场景举例：
- 移动端首屏只需基础样式？用
<link rel="preload" href="components.css" as="style" onload="this.rel='stylesheet'"> - 暗色主题仅在匹配
prefers-color-scheme: dark时加载？<link href="dark.css" media="prefers-color-scheme: dark"> -
@import没有对应机制，无法实现这类控制
动态插入样式只能用 link，@import 运行时无效
JS 动态切换主题、按需加载模块样式时，只能创建 <link> 元素：document.createElement('link') + appendChild()，浏览器立刻发起请求并应用；而试图用 style.textContent = '@import url(theme-dark.css)' 不会生效，控制台通常静默忽略。
原因很直接：@import 必须出现在 CSS 文件或 <style></style> 标签最顶部，且必须是 CSS 解析器在初始 parse 阶段看到的内容。运行时注入的字符串不会被二次解析。
- 构建工具（如 Vite、webpack）中，
@import会被提前合并，但那是构建期行为，不改变原生 CSS 加载语义 -
document.styleSheets里根本看不到@import加载的样式表——它属于“子样式表”，只能通过cssRules逐层递归访问，且时机不可靠
IE6–IE8 对 @import 存在解析 bug，link 无兼容性风险
旧版 IE 对 @import 在 CSS 文件内使用存在解析异常，比如忽略部分规则、错乱媒体查询匹配；<link> 则在所有浏览器中行为一致，包括 IE5+。
容易被忽略的细节：@import 的语法位置和分号要求非常严格——漏掉分号、写在 <style></style> 非开头位置、或混入其他声明后，整条规则可能被浏览器静默丢弃，且无任何提示。
现代项目里，@import 唯一合理用途只剩维护遗留拆分逻辑或极少数 CSS hack 场景；只要涉及性能、可维护性或动态控制，<link> 是唯一可靠选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
