一：概述

link和@import都是引入外部样式表的方法，那么，他们怎么区分呢？

二：类别

（1）：资源加载顺序上

link=>并行加载，不阻塞HTML解析，通过通过 media="not all" 或 onload 事件延迟非关键 CSS实现非阻塞渲染

@import=>串行加载，可能延迟渲染，必须等待宿主 CSS 文件下载完成，再按顺序加载导入的文件，导致渲染阻塞

（2）HTTP协议优化上

link=>支持，多个并行传输，还从服务器主动推送关键CSS，

@import=>受限制宿主文件，单个TCP连接内串行处理，无法直接推送

（3）样式覆盖上

link=>按 HTML 中声明顺序覆盖（后者优先级高）

@import=>按导入顺序覆盖，且优先级低于宿主文件内的样式

（4）全局污染上

link=>可通过 Shadow DOM 或 CSS Modules 隔离作用域

@import=>所有导入样式自动变为全局，易引发命名冲突。

三：代码

<!-- 测试案例：加载 3 个 200KB 的 CSS 文件 -->  
<!-- 使用 <link> -->  
<link href="a.css">  
<link href="b.css">  
<link href="c.css">  
<!-- 总加载时间：约 350ms（并行） -->  

/* 使用 @import */  
/* a.css 中 */  
@import url(b.css);  
@import url(c.css);  
<!-- 总加载时间：约 650ms（串行） -->  

四：流程图

是否需要动态加载样式？  
├── 是 → 选择 `<link>`（支持 JS 操作）  
└── 否 →  
    ├── 是否涉及超大项目代码拆分？  
    │   ├── 是 → 选择 `<link>`（利用构建工具分割）  
    │   └── 否 →  
    │       ├── 是否需兼容 IE8 等老旧浏览器？  
    │       │   ├── 是 → 选择 `@import`（部分旧浏览器支持）  
    │       │   └── 否 → 选择 `<link>`  
    └── 是否为第三方库内部样式？  
        ├── 是 → 可谨慎使用 `@import`  
        └── 否 → 选择 `<link>`  

五：现代开发工具上

（1）：构建工具上

link=>在webpack 6中默认识别Entry资源，支持代码分割，Vite 5中支持参数内联

@import=>在webpack 6中视为css内联依赖，合并到单个chunk，在Vite 5中预编译段解析，可能会导致重复打包

（2）：Tree Shaking优化上

link=>通过PurgeCSS 精准删除未使用的 CSS 规则

@import=>静态分析困难，嵌套层级过深时易残留无用代码

六：拓展  

（1）link增强特性

‌优先级控制‌：

<link rel="stylesheet" fetchpriority="high">（Chromium 105+）

‌条件加载‌：

<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

七：总结

1：link是HTML标签，可用于HTML中，而@import是CSS规则，用于CSS中。link并行加载，速度快，兼容性好；

2：@import串行加载，可能较慢，且在旧浏览器中可能不受支持