link支持并行下载、避免FOUC、兼容动态插入和现代工具链，@import则强制串行加载、引发FOUC、不支持JS动态注入且与构建工具及CDN易冲突。
link 会触发并行下载，@import 会强制串行加载
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会立即发起 CSS 文件请求，并与其他资源（如图片、JS）并行下载。而 @import 是 CSS 规则，只有当包含它的样式表被解析到那一行时，才会发起新请求——这意味着它必须等前一个 CSS 文件下载并解析完才能开始下一个。
常见错误现象：页面里用多个 @import 引入 a.css → b.css → c.css，结果变成「a 下完→解析→发现 @import b→b 下完→解析→发现 @import c→c 下完」，总耗时接近三者之和。
- 即使把多个
@import写在同一张内联<style></style>里，浏览器仍按顺序执行，无法并行 - IE6–IE8 对连续
@import有额外阻塞逻辑，可能跳过后续规则或报错 -
link没有这种限制：写三个<link>，浏览器大概率同时发起三个 HTTP 请求
使用 @import 会导致 FOUC（无样式内容闪烁）
因为 @import 的加载时机晚于 DOM 构建，尤其在网速慢或 CSS 文件较大时，浏览器先渲染出无样式的 HTML 内容，等 @import 的 CSS 终于加载完才重绘——用户会看到「白屏→文字乱排→突然整齐」的闪烁。
这个现象在移动端更明显：弱网下首屏渲染完成快，但 @import 的 CSS 还卡在队列里。
立即学习“前端免费学习笔记（深入）”；
-
link在 HTML 解析阶段就触发下载，只要服务器响应及时，样式能赶在首次绘制前就位 - 某些构建工具（如 Webpack）若配置不当，把 CSS 拆包后用
@import注入，也会复现 FOUC - 哪怕只用一次
@import，只要它出现在外部 CSS 文件里（而非内联<style></style>），就逃不掉这个延迟链
DOM 动态插入样式时，只能用 link，不能用 @import
想用 JS 切换主题、按需加载组件样式？document.createElement('link') 可以直接插入并生效；但你没法用 JS “写入”一个 @import 规则并让它被浏览器识别为有效样式源。
原因很直接：@import 必须出现在 CSS 文件或 <style></style> 标签的最顶部，且必须是 CSS 解析器在初始 parse 阶段看到的内容。运行时注入的字符串不会被二次解析。
- 动态创建
<link>后，浏览器立刻发起请求并应用样式 - 试图用
style.textContent = '@import url(theme-dark.css)'不会生效，控制台通常静默忽略 - 现代框架（如 React）的 CSS-in-JS 方案底层也依赖
<link>或<style></style>插入，从不碰@import
兼容性与工具链支持让 link 成为唯一稳妥选择
@import 是 CSS2.1 引入的特性，IE5+ 支持，看似没问题——但实际项目中，它常和构建流程、CDN 缓存、HTTP/2 推送等机制冲突。
比如：Webpack 的 mini-css-extract-plugin 默认把 @import 当作模块依赖处理，但若路径是相对 URL 或含变量，容易产出无效 @import 语句；又比如 CDN 配置了 CSS 文件缓存，但 @import 的子文件未被单独缓存，导致每次都要回源。
-
link的href是明确的 URL，所有工具链、CDN、Lighthouse 审计都能准确识别和优化 - HTTP/2 Server Push 对
link可预测推送；对@import无法提前知道要推什么 - Lighthouse 会把含
@import的页面标为「Render-blocking resources」，即使你写了media="print"也没用——@import不支持媒体查询条件提前判断
真正需要关注的不是“能不能用”，而是“为什么还有人用”。多数情况是历史代码遗留，或误以为 @import 能像 JS 的 import 那样做条件加载——但它做不到。
