link性能更优：它触发并行下载、支持preload和media条件加载、可JS动态插入且无兼容性风险；@import强制串行阻塞、引发FOUC、不支持动态注入和条件跳过，弱网下首屏延迟可达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+。
link 支持 preload 和 media 条件加载，@import 完全不支持
<link> 可通过 rel="preload" 提前拉取关键 CSS，或用 media 属性跳过不匹配条件的下载（如 media="print" 在屏幕浏览时不发起请求）；@import 即使带媒体查询（如 @import url("mobile.css") screen and (max-width: 768px);），也会无差别发起 HTTP 请求，只是不应用规则——浪费带宽。
使用场景举例：
- 移动端首屏只需基础样式，完整组件库 CSS 可延迟加载 → 用
<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 有额外解析限制，link 没有兼容性风险
<link> 是 HTML 标准机制，所有浏览器从 IE6 起就完全支持；@import 虽也古老，但在 CSS 文件内使用时，IE6–IE8 存在解析 bug：比如 @import 必须出现在文件最开头（除 @charset 外），否则被忽略；连续多个 @import 可能跳过后续规则或报错。
构建工具（如 Webpack、Vite）默认把 @import 提升为 <link> 或内联处理，但需确认配置未保留原始语义。若输出产物中仍含 @import，它在运行时依然会触发串行行为。
真正容易被忽略的是：即使你只在 CSS 文件里写了一次 @import，只要它出现在外部 CSS 中（而非内联 <style></style>），就逃不掉这个延迟链——PageSpeed Insights 报告 “Render-blocking resources”，但你检查 HTML 只看到 1 个 <link>，问题其实藏在它引入的 CSS 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
