@import 由 CSS 解析，延迟加载易致 FOUC；2. <link> 为 HTML 标签，解析时即并行加载，提升渲染速度；3. @import 限于 CSS 内使用且需前置；4. <link> 置于 HTML head 中，支持 media 条件加载更优；5. @import 影响性能，不利优化，推荐优先使用 <link>。
使用 @import 和 <link> 都可以在网页中引入外部样式表，但它们在加载方式、兼容性以及性能上存在一些关键区别。
1. 加载时机不同
@import 是 CSS 提供的语法，样式文件会在页面加载完成后再开始下载和解析。也就是说，浏览器先加载 HTML 和主 CSS 文件，再处理 @import 引入的样式，容易导致页面短暂无样式（FOUC）。
<link> 是 HTML 标签，浏览器在解析 HTML 时遇到 link 标签会立即开始下载对应的 CSS 文件，能更早地并行加载资源，提升页面渲染速度。
2. 使用位置不同
@import 只能在 CSS 文件或 style 标签内部使用，必须写在其他 CSS 规则之前（除非用条件判断）。
立即学习“前端免费学习笔记（深入）”；
例如：
@import url('style.css');body { margin: 0; }
<link> 只能在 HTML 文档的 <head> 中使用，是标准的外部资源引用方式。
3. 条件引入支持不同
<link> 支持通过 media 属性设置条件加载，比如只在打印时引入某个样式表：
<link rel="stylesheet" href="print.css" media="print">@import 也支持 media，但语法更复杂，且兼容性略差：
@import url('print.css') print;4. 性能与维护性
大量使用 @import 会导致 CSS 文件串行加载，阻塞渲染，影响首屏性能。尤其是嵌套 @import 时，每个文件都要等前一个下载完才能发起请求。
<link> 更利于构建工具优化，便于预加载（preload）、DNS 预解析等性能优化手段的介入。
基本上就这些。虽然两种方式都能引入样式，但在实际开发中推荐优先使用 <link> 标签，更高效、可控。@import 更适合在 CSS 模块化或特定主题切换场景中使用。
