link 比 @import 更高效且可控：link 立即并行加载 css，支持 js 动态操作和 ssr；@import 延迟触发、串行加载、无 dom 接口、兼容性差且语法敏感，混合使用会破坏并行加载。
link 和 @import 都能加载 CSS，但它们不是可互换的替代方案——用错一个，页面就可能白屏几秒、样式错乱、JS 控制失效，甚至在旧浏览器里直接不生效。
为什么 @import 会延迟渲染？
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会立刻发起并行请求，CSS 下载和 HTML 解析同步进行；而 @import 是 CSS 规则，必须等包含它的 CSS 文件下载并解析完，才会触发被导入文件的请求。
- 写在
<style></style>标签里的@import url("main.css")：要等整个 HTML 解析完、<style></style>内容开始解析后才发请求 - 写在
base.css文件开头的@import url("theme.css")：必须先下载并解析完base.css，才能发起theme.css请求 - 多个
@import会串行加载，@import url("a.css"); @import url("b.css");意味着 b.css 等 a.css 完全加载+解析后才开始
link 可以用 JS 动态控制，@import 不行
DOM 操作只认 HTML 元素，document.createElement("link") 插入后浏览器立即处理；@import 是纯 CSS 语法，不在 DOM 树中，JS 没法“注入”或“移除”它。
- 主题切换、暗色模式切换必须用
link+disabled属性控制开关 - 服务端渲染（SSR）场景下，动态插入样式只能靠
link标签，@import在初始 HTML 中写死就无法 runtime 修改 - 构建工具（如 Webpack/Vite）生成的 CSS chunk，默认都转成
link标签注入，不是因为习惯，是因为技术限制
兼容性和语法陷阱
@import 的兼容性远不如 link：IE5+ 才支持，且对书写位置和语法极其敏感。
-
@import必须写在 CSS 文件最顶部，前面不能有任何字符（包括注释、空格、BOM） -
@import url("a.css")后面必须加分号，漏掉就会整个规则失效，且无报错提示 -
@import "a.css"（省略url()）在部分老版本 Safari/Chrome 中不识别，应统一用@import url("a.css") -
link标签没有这些限制，<link href="a.css" rel="stylesheet">即使加了多余空格或换行也照常工作
link 引入主样式，里面再 @import 子样式，会导致所有浏览器都失去并行加载能力——这个细节很容易被忽略，但直接影响首屏时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
