@import可用于引入CSS文件并支持媒体查询，但会阻塞渲染、串行加载且不利缓存，建议优先使用link标签或构建工具优化性能。
在CSS中，@import 是一种用于从一个样式表中引入另一个CSS文件的规则。它可以在现有的CSS文件中加载额外的样式资源，实现样式的模块化管理。虽然功能可用，但在实际开发中需谨慎使用，尤其要考虑性能影响。
1. @import 的基本用法
@import 必须写在CSS文件的开头，任何其他规则之前。它可以以以下几种方式引入外部样式：
- 直接引入：@import "style.css";
- 带媒体查询引入：@import url("print.css") print;
- 引入网络资源：@import url("https://example.com/theme.css");
注意：如果放在声明之后，该规则将失效。
2. 优点：模块化与条件加载
- 便于组织代码：可将不同功能的样式拆分为多个文件，如 base.css、layout.css、theme.css，再通过主CSS统一引入。
- 支持媒体条件：可以根据设备类型（如打印、屏幕）按需加载样式，减少不必要的渲染负担。
- 逻辑集中：适用于维护大型项目时，保持主样式入口清晰。
3. 缺点：性能瓶颈明显
- 阻塞渲染：浏览器解析到 @import 时才会发起新请求，导致样式加载延迟，增加页面白屏时间。
- 无法并行加载：与 标签并行下载不同，@import 引入的文件是串行加载的，前一个没完成，下一个不会开始。
- 不利于缓存优化：相比HTML中的 link 标签，@import 不易被预加载提示（preload）优化，影响关键路径性能。
- JavaScript 难以控制：动态移除或插入 @import 规则比操作 DOM 中的 link 元素更复杂。
4. 性能建议：优先使用 <link> 替代 @import
在HTML中使用 <link rel="stylesheet"> 是更优选择：
立即学习“前端免费学习笔记（深入）”；
- 浏览器可在解析HTML时尽早发现并下载CSS，提升加载速度。
- 多个 link 标签可并行加载，缩短整体等待时间。
- 支持 preload、media 属性，便于做资源提示和响应式优化。
例如：
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="theme.css" media="screen">
如果必须在CSS内部引入，考虑是否可通过构建工具（如Webpack、PostCSS）提前合并文件，避免运行时加载开销。
基本上就这些。@import 虽然语法简单，但性能代价较高，现代前端开发更推荐使用构建流程整合样式或直接使用 link 标签引入，确保页面快速响应。
