面试题：使用 link 和 @import 引用 CSS 的区别

在 HTML 中引入外部 CSS 样式表有两种主要方式：使用 <link> 标签和在 CSS 文件中使用 @import 规则。虽然它们都能加载样式，但在性能、兼容性、功能和使用场景上存在显著差异。

特性	`<link>` 标签	`@import` 规则
HTML/CSS 层级	HTML 中使用（结构层）	CSS 文件中使用（样式层）
并行加载	✅ 支持，浏览器可并行下载 CSS 文件	❌ 不支持，必须先下载并解析主 CSS 文件后才加载被导入的文件
性能影响	⚡️ 更快，减少页面渲染阻塞	🐢 更慢，可能导致“FOUC”（无样式内容闪烁）
JavaScript 操作	✅ 可通过 DOM 动态添加/删除	❌ 无法直接通过 JS 操作
兼容性	✅ 所有浏览器支持	⚠️ IE5+ 支持，但早期版本有 bug
媒体查询支持	✅ 支持（`media="screen"`）	✅ 支持（`@import url("print.css") print;`）
数量限制	无硬性限制	❌ 浏览器对嵌套 `@import` 有层级和数量限制

<link rel="stylesheet" href="style.css" media="screen">
  <link rel="stylesheet" href="print.css" media="print">

优点：
- 性能优越：浏览器在解析 HTML 时就能发现 <link> 标签，并立即开始并行下载 CSS 文件，减少关键渲染路径时间。
- 支持媒体查询：可以为不同设备（如屏幕、打印）加载不同的样式表。
- 可被 JavaScript 控制：可通过 document.createElement('link') 动态加载或移除样式。
- 是标准推荐做法。
缺点：
- 必须写在 HTML 中，不适合在 CSS 内部组织样式依赖。

/* 在 CSS 文件中导入其他 CSS 文件 */
  @import url("reset.css");
  @import "theme.css";
  @import url("mobile.css") screen and (max-width: 768px);

优点：
- 模块化组织：可以在一个主 CSS 文件中导入多个子样式文件，便于维护大型项目。
- 条件导入：支持媒体查询，实现响应式样式按需加载。
- 避免全局污染：适合在 CSS 预处理器（如 Sass、Less）中使用，编译后通常会被替换为单个文件。
缺点：
- 性能瓶颈：@import 的 CSS 文件必须等主 CSS 文件下载并解析后才开始加载，形成“链式加载”，增加页面渲染延迟。
- 阻塞渲染：如果导入的文件较多或较大，会导致页面长时间无样式（FOUC）。
- 调试困难：浏览器开发者工具中可能难以追踪样式来源。
- 不支持动态操作：无法通过 JavaScript 直接控制 @import 加载的样式。

⚠️ 注意：在实际生产环境中，应优先使用 <link>。@import 更多用于开发阶段的模块组织，最终通过构建工具（如 Webpack）打包成单一文件。

假设你有两个 CSS 文件：reset.css 和 main.css。

<link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="main.css">

→ 浏览器同时下载两个文件，速度快。

/* main.css */
  @import url("reset.css");
  /* 其他样式 */

<link rel="stylesheet" href="main.css">

→ 浏览器先下载 main.css → 解析到 @import → 再下载 reset.css → 最后应用样式。串行加载，速度慢。

结论：

在现代前端工程化实践中，推荐使用 <link> 引入打包后的单一 CSS 文件，以获得最佳性能和可维护性。

THE END