link是唯一推荐的外链CSS方式；@import会串行阻塞、触发FOUC、浪费带宽、不支持media/preload、无法动态控制，且运行时插入无效。
link 是现代前端中引入 CSS 的唯一推荐方式；@import 不是“次优”，而是明确有运行时性能风险的写法——它会串行阻塞、触发 FOUC、浪费带宽，且无法被 JS 动态控制。
浏览器加载时机完全不同
HTML 解析到 <link rel="stylesheet"> 时，浏览器立刻发起请求，并与其他资源（JS、图片）并行下载；而 @import 是 CSS 解析阶段才生效的规则，必须等它所在的样式表（无论是外部 .css 还是内联 <style>）完整下载、解析到那一行，才会开始请求下一个文件。
- 常见错误：一个
a.css里写了@import url("b.css"); @import url("c.css");→ 实际是 b 下完 → 解析 → c 下完 → 解析，总耗时接近串行叠加 - PageSpeed Insights 报 “Render-blocking resources” 却只看到 1 个
<link>？大概率是那个 CSS 文件内部嵌了多层@import，把关键样式拖慢 2–3 秒 - 实测：3 层嵌套
@import在 3G 模拟下比等效<link>多出 800ms+ 首屏阻塞时间
media 和 preload 完全不支持 @import
<link> 的 media 属性能让浏览器跳过不匹配条件的下载（比如 media="print" 的样式在屏幕浏览时根本不发请求）；rel="preload" as="style" 可提前拉取高优先级 CSS。这些能力 @import 一条都没有。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 误用：
@import url("mobile.css") screen and (max-width: 768px);—— 语法合法，但mobile.css仍会被无条件下载，只是不应用，纯属浪费带宽 - 正确写法：
<link href="mobile.css" media="screen and (max-width: 768px)">，不匹配时根本不会发请求 -
rel="preload"必须配合 JS 控制时机（如onload="this.rel='stylesheet'"），@import无法参与这个流程
JS 动态插入样式只能用 link，@import 运行时无效
主题切换、按需加载组件样式、A/B 测试等场景，必须靠 JS 创建和操作 <link> 元素；@import 是纯静态 CSS 规则，运行时注入完全不生效。
立即学习“前端免费学习笔记（深入）”；
- 以下写法不生效：
const style = document.createElement('style');<br>style.innerHTML = '@import url("theme-dark.css");';<br>document.head.appendChild(style); - 原因：浏览器只在初始 CSS 解析阶段处理
@import，运行时动态插入的字符串会被静默忽略 -
<link>插入后会立刻出现在document.styleSheets中，可监听加载状态；@import导入的样式不会出现在该列表里，无法可靠检测是否加载完成
最容易被忽略的一点是：哪怕你没手写 @import，只要用了某些老旧构建配置或未打包的第三方 CSS 库（比如直接引用未经过 Vite/Webpack 处理的 legacy UI 包），就可能在运行时悄悄引入串行阻塞链。真正安全的 @import 只存在于构建工具源码中——它在编译期就被展开合并了，最终输出的仍是 <link> 可加载的文件。
