link是唯一推荐的外链css方式；@import因串行阻塞、fouc、无法条件加载和动态注入，存在明确性能风险，且不支持media、preload及运行时控制。
link 是唯一推荐的外链 CSS 方式；@import 在现代项目中不是“次优选择”，而是明确有性能风险的写法——它会串行阻塞、触发 FOUC、无法条件跳过、不支持动态注入。
为什么 link 加载快，而 @import 会拖慢首屏
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 立即发起请求，并与其他 link 并行下载；而 @import 必须等它所在的 CSS 文件（无论是外部 .css 还是内联 <style></style>）完整下载并开始解析后，才启动被导入资源的请求。
- 一个
@import url("a.css")后面再跟@import url("b.css")，b.css会卡在a.css完全就绪之后才发起请求 - PageSpeed Insights 报 “Render-blocking resources”，但你只写了 1 个
link？大概率是它引入的 CSS 里嵌了多层@import，把关键样式拖慢 2–3 秒 - 实测：3 层嵌套
@import在弱网下比等效link多出 800ms+ 首屏阻塞时间
link 支持 media 和 preload，@import 完全不支持
link 的 media 属性能让浏览器跳过不匹配条件的下载（比如 media="print" 的样式在屏幕浏览时根本不发请求）；rel="preload" as="style" 可提前拉取高优先级 CSS。这些能力 @import 一条都没有。
- 误用：
@import url("mobile.css") screen and (max-width: 768px);—— 语法看似合理，但无效。媒体查询只在 CSS 解析阶段生效，mobile.css仍会被无条件下载 - 正确写法：
<link href="mobile.css" media="screen and (max-width: 768px)"> -
preload的 CSS 必须配合 JS 切换rel值才能生效，例如：onload="this.rel='stylesheet'"；仅靠preload不会应用样式
运行时动态加载只能用 link，@import 无法注入
JS 操作 DOM 插入新样式，唯一可行方式是创建 link 元素；@import 是纯 CSS 规则，不能通过 document.createElement('style') 或 insertRule 动态生成。
- 以下写法不生效：
const style = document.createElement('style'); style.innerHTML = '@import url("theme-dark.css");'; document.head.appendChild(style); - 原因：浏览器忽略运行时动态插入的
@import规则，它只在 CSS 文件首次解析时起作用 - 主题切换、A/B 测试、按需加载组件样式等场景，必须用
link实现
最容易被忽略的一点是：link 加载的样式表会立刻出现在 document.styleSheets 中，而 @import 导入的样式不会——这意味着你想用 JS 检测是否加载完成，根本没法可靠监听。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
