link标签触发并行下载，@import强制串行阻塞解析：前者在HTML解析时立即发起请求且支持preload、media条件加载及JS动态插入；后者需等父样式表下载解析完才请求，不支持任何优化机制，易导致首屏延迟800ms+和FOUC。
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 阶段看到的内容。运行时注入的字符串不会被二次解析。
- 现代框架（如 React）的 CSS-in-JS 方案底层也依赖
<link>或<style></style>插入，从不碰@import - IE6–IE8 对
@import在 CSS 文件内使用存在解析 bug，<link>无兼容性风险
容易被忽略的细节：@import 的语法位置和分号要求
@import 必须放在 CSS 文件或 <style></style> 标签的最开头，在所有其他 CSS 规则之前；其后的分号是必需的，省略会导致外部样式表无法正确导入，并生成错误信息。
这个限制让维护成本上升：一旦在 @import 后误加注释、空行或任何其他 CSS 声明，整个导入就失效。而 <link> 在 中位置灵活，只要在文档解析早期即可。
真正麻烦的是嵌套场景——比如构建工具输出的 CSS 里混入了 @import，又没做去重或合并，可能触发重复请求或路径解析失败，这类问题往往在上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
