link 标签加载 css 并行高效，@import 串行阻塞渲染；前者支持 preload、media 懒加载和 js 动态控制，后者无此能力且易隐式拖慢首屏，现代项目应避免使用。
link 标签加载 CSS 是并行的，@import 是串行阻塞的
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会立即发起网络请求，并且多个 <link> 之间默认并行下载；而 @import 写在 CSS 文件里（或 <style></style> 块中），会等到父样式表下载、解析完才开始加载被 import 的资源，形成隐式串行链。这意味着一个 @import url("a.css") 后面再 @import url("b.css")，b 必须等 a 完全就绪才能启动请求。
常见错误现象：PageSpeed Insights 报告 “Render-blocking resources”，但你检查 HTML 只有 1 个 <link>，实际是它引入的 CSS 里嵌了多层 @import，把关键样式拖慢了 2–3 秒。
- 使用场景：仅在需要条件化加载（如 IE 专用 hack）或维护遗留 CSS 拆分逻辑时才考虑
@import，现代项目应避免 - 性能影响：实测 3 层
@import在弱网下可比等效<link>多出 800ms+ 首屏阻塞时间 - 兼容性无差别：所有浏览器都支持两者，但
@import在 CSS 文件内不支持媒体查询动态匹配（<link media="print">可提前排除）
link 标签支持 preload 和 media 属性，@import 不支持
<link> 可以配合 rel="preload" 提前拉取关键 CSS，也能用 media 属性做媒体查询懒加载（比如 media="print" 的样式不会阻塞屏幕渲染）；@import 完全没这些能力，写进去就强制加载。
典型误用：@import url("mobile.css") screen and (max-width: 768px) —— 这句语法无效，@import 后的媒体查询只在 CSS 解析阶段生效，无法阻止初始下载。
- 正确做法：用
<link href="mobile.css" media="screen and (max-width: 768px)">，浏览器会跳过下载直到匹配条件 - 参数差异：
<link>的as="style"+rel="preload"能让 CSS 进入高优先级队列，@import没对应机制 - 注意：preload 的 CSS 仍需通过另一个
<link rel="stylesheet">来实际应用，不能只靠 preload
JavaScript 动态插入 link 更可控，import 无法 runtime 加载
运行时想按需加载主题或模块样式？只能操作 <link> 元素：document.createElement("link") + appendChild；@import 是纯 CSS 规则，JS 无法生成或注入它（style.innerHTML += "@import..." 不生效）。
容易踩的坑：有人试图用 JS 拼接字符串然后 style.textContent = "@import url(x.css)"，结果样式完全不加载，控制台也无报错——因为 @import 必须出现在 CSS 文本最前面，且只在解析时有效。
- 实操建议：封装一个
loadCSS(url)函数，创建<link rel="stylesheet">并监听onload或onerror - 注意
link插入顺序：新<link>默认追加到末尾，若依赖层叠顺序，需用insertBefore控制位置 - 动态加载的 CSS 不会触发 FOUC（闪白）吗？会，但可通过
media="print"初始隐藏 + onload 后切回media="all"缓解
构建工具里 import 是模块化手段，和 HTML 中的 @import 不是一回事
Webpack/Vite 里的 @import "./theme.scss" 是预处理器指令，在构建时被展开合并成单个 CSS 文件，最终输出的仍是普通 <link> 引用；它和浏览器原生的 @import 指令无关，也不产生运行时请求。
混淆点常出现在调试阶段：开发者看到源码写了 @import，就以为线上也是动态加载，结果上线后发现所有样式都打进了主包，体积暴涨。
- 验证方法：打开浏览器 DevTools → Network → 刷页面，看 CSS 请求列表是否多于 HTML 中的
<link>数量 - 如果用了 Sass/Less，确保
@import是路径别名或相对路径，而非 HTTP URL（否则预处理器会尝试下载，导致构建失败） - Vite 的
import.meta.glob等动态导入机制，底层仍是生成多个<link>，不是@import
@import 的陷阱在于它藏得深——你看不到 HTML 里的请求，却要为它付出性能代价。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
