一、语法与使用场景
| 特性 | <link> | @import |
|---|---|---|
| 归属 | HTML 标签 | CSS 语法 |
| 代码位置 | 写在 <head> 中 | 必须写在 CSS 文件或 <style> 内部 |
| 基本语法 | <link rel="stylesheet" href="style.css"> | @import url("style.css"); |
| javascript的支持性 | link支持使用Javascript控制DOM去改变样式 | @import不支持 |
| 加载顺序 | 在页面载入时同时加载 | 需要等页面完全载入后加载 |
| 兼容性 | 所有浏览器 | IE5+ 支持，但存在部分历史问题 |
代码示例：
<!-- link 标签 -->
<link rel="stylesheet" href="main.css">
<!-- @import 语法 -->
<style>
@import url("module.css");
</style>
二、加载行为差异
| 特性 | <link> | @import |
|---|---|---|
| 加载顺序 | 并行加载，不阻塞页面渲染 | 串行加载，需等待父文件解析完成 |
| 阻塞渲染 | 不阻塞（除非设置 media="print"） | 可能阻塞后续资源加载 |
| 兼容性 | 所有浏览器 | IE5+ 支持，但存在部分历史问题 |
关键影响：
使用 @import 可能导致 CSS 文件加载顺序混乱，尤其是多文件依赖时。
三、功能扩展性
| 特性 | <link> | @import |
|---|---|---|
| 媒体查询 | 通过 media 属性支持 | 可直接附加媒体条件 |
| 预加载 | 支持 rel="preload" 优化加载 | 不支持 |
| 资源提示 | 支持 dns-prefetch 等优化 | 无相关功能 |
代码示例：
<!-- link 的媒体查询 -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">
<!-- @import 的媒体查询 -->
<style>
@import url("print.css") print;
</style>
四、性能与工程化
| 特性 | <link> | @import |
|---|---|---|
| HTTP 请求 | 可并行下载多个 CSS 文件 | 嵌套引入可能导致更多请求 |
| 缓存优化 | 更容易被浏览器缓存 | 嵌套文件可能影响缓存策略 |
| 构建工具支持 | 被所有打包工具（Webpack/Vite）优化 | 部分工具需插件处理 |
最佳实践：
现代工程中优先使用 <link>，配合打包工具合并 CSS 文件，减少请求次数。
五、面试高频问题
-
问：为什么更推荐用
<link>而不是@import？
答：<link>支持并行加载、更好的缓存控制，且不阻塞页面渲染。 -
问：
@import在什么场景下仍有价值？
答：模块化 CSS 时按条件加载（如特定媒体查询下的样式），但应谨慎使用。 -
问：如何用
@import避免重复加载？
答：无法彻底避免，建议使用预处理器（如 Sass）的@use或构建工具合并文件。
六、记忆口诀
“Link 是 HTML 亲儿子，并行加载性能高；Import 串行易阻塞，模块化时需谨慎”
