link是HTML标签，@import是CSS规则；link并行加载、功能丰富、支持JS监听，@import串行加载、易致FOUC、无扩展能力，现代项目应避免使用@import引入主样式表。
link 是 HTML 标签，@import 是 CSS 规则
link 是 HTML 提供的原生标签，写在 <head> 里，用于加载外部资源（CSS、icon、preload 等）；@import 是 CSS 语法，必须写在 CSS 文件或 <style> 块内部，只能导入其他 CSS 文件。
这意味着：@import 无法在纯 HTML 中独立使用，一旦写在 <style> 外（比如直接丢进 <head>），浏览器会忽略它；而 link 不依赖 CSS 解析器，加载更早、更可靠。
link 支持并行加载，@import 会阻塞后续样式解析
浏览器遇到 link rel="stylesheet" 时，会发起并行请求，并开始预解析后续 HTML；而 @import 会强制等待被导入的 CSS 下载并解析完成，才能继续处理当前样式块之后的内容——包括其他 @import 或规则声明。
常见表现：
立即学习“前端免费学习笔记（深入）”；
- 多个
@import嵌套（如 A.css 导入 B.css，B.css 导入 C.css）→ 串行加载，白屏时间拉长 - 把
@import放在<style>底部 → 上方规则已生效，但下方导入的样式可能覆盖不及时，引发 FOUC（Flash of Unstyled Content） - 用
@import加载大文件 + 页面有内联样式 → 内联样式先渲染，再被覆盖，视觉跳变
link 有更多功能和属性控制，@import 几乎没有扩展能力
link 可通过属性精细控制行为：
-
rel="preload"或rel="prefetch"提前加载非关键 CSS -
media属性实现响应式加载（如media="(max-width: 768px)"） -
onload和onerror监听加载状态（配合 JS 动态回退） -
as="style"配合rel="preload"提升优先级
@import 只支持两个参数：@import url("path.css") [media-query];，连 support 条件或异步标记都没有，也不能加缓存 bust 参数（如 ?v=1.2）而不破坏语法。
现代项目基本不该用 @import 引入主样式表
除了极少数遗留 CSS 框架内部的模块化写法（如旧版 Bootstrap 的部分版本），所有新项目都应避免用 @import 替代 link。它不支持 HTTP/2 多路复用优化，不能被 webpack / Vite 等工具静态分析，也不兼容大部分 CSS-in-JS 的提取逻辑。
最容易被忽略的一点：当用 link 加载 CSS 时，document.styleSheets 能立刻访问到对应 CSSStyleSheet 对象；而 @import 导入的样式表是异步注入的，且不会出现在该列表中——想用 JS 检测是否加载完成？别指望它。
