link 标签加载 CSS 是并行的，多个 link 可并发下载且不阻塞 HTML 解析；而 @import 在 CSS 中为串行阻塞，必须等前一个 CSS 解析完才发起下一个请求，显著延长渲染时间。
link 标签加载 CSS 是并行的
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会立即发起 CSS 文件请求，且与 HTML 解析、其他资源（如 JS、图片）下载并行执行。这是现代浏览器默认行为，也是推荐方式。
关键点：
-
<link>不阻塞 HTML 解析，但会阻塞后续<script></script>的执行（除非加async或defer） - 多个
<link>之间彼此不阻塞，可并发下载 - 支持
media属性做媒体查询懒加载（如media="print"时不会阻塞页面渲染）
@import 在 CSS 内部引入时是串行阻塞的
在 CSS 文件中用 @import url("a.css") 加载另一个样式表，会导致浏览器必须先下载并解析完当前 CSS，再发起 @import 指定的请求——这个过程是严格串行的，且无法被预加载器提前发现。
常见问题场景：
立即学习“前端免费学习笔记（深入）”；
- 主 CSS 文件里写
@import "theme.css"; @import "base.css";→ 两个请求依次发生，总耗时 = a.css 下载 + 解析 + theme.css 下载 + 解析 + base.css 下载 + 解析 - 即使
@import写在<style></style>标签里（非外部文件），也会触发同步阻塞行为 - 不支持
media条件预判（@import print.css screen这种语法无效）
link 和 @import 的兼容性与可维护性差异
<link> 是 HTML 标准机制，所有浏览器从 IE6 起就完全支持；@import 虽也古老，但在 CSS 文件内使用时，IE6–IE8 存在解析 bug（如 @import 必须出现在文件最开头，否则被忽略）。
工程实践建议：
- 禁止在 CSS 文件中使用
@import引入其他 CSS（尤其避免链式 import） - 构建工具（如 Webpack、Vite）默认把
@import提升为<link>或内联处理，但需确认配置未保留原始语义 - 若需条件加载（如暗色主题），优先用
<link media="prefers-color-scheme: dark">，而非@import (prefers-color-scheme: dark)
实测性能差距示例（Chrome DevTools Network 面板）
以下两种写法加载相同两个 CSS 文件，在无缓存、3G 网络模拟下典型表现：
<!-- 方式 A：link 并行 --> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="theme.css">
<!-- 方式 B：@import 串行（在 base.css 内部）-->
/* base.css */
@import url("theme.css");结果：
- 方式 A：两个请求时间线重叠，总阻塞时间 ≈ max(base.css, theme.css) 的下载+解析耗时
- 方式 B：theme.css 请求在 base.css 完全解析后才开始，总阻塞时间 ≈ base.css 耗时 + theme.css 耗时
- 实测差值常达 200–600ms，对 LCP（最大内容绘制）有直接影响
真正容易被忽略的是：哪怕你只在某个低频 CSS 里用了 @import，它仍会拖慢整个样式表的可用时间，进而延迟页面首次渲染。
