优先使用<link>标签引入css，因其在html解析时即可并行加载样式文件，缩短关键渲染路径；而@import需等待主CSS下载解析后才发起请求，造成串行加载和渲染延迟。
在网页开发中，引入css样式表常用的方式有两种：使用 @import 规则和使用 HTML 的 <link> 标签。虽然两者都能实现样式加载，但在性能方面存在明显差异。
加载时机与阻塞行为
@import 是在 CSS 文件内部使用的规则，浏览器必须先下载并解析主 CSS 文件后，才能发现并请求被导入的样式文件。这种“串行加载”机制会增加关键渲染路径的时间，导致页面渲染延迟。
而 <link> 标签写在 HTML 中，浏览器在解析 HTML 时就能尽早发现资源依赖，并立即发起请求，无需等待其他 CSS 下载完成，属于“并行加载”，更有利于性能优化。
对页面渲染的影响
- 使用 @import 时，样式表的加载发生在 CSS 解析阶段，可能造成额外的重排或样式闪烁（FOUC）
- <link> 被浏览器视为高优先级资源，能更快地进入预加载扫描器（preload scanner），提升加载效率
- 多个 @import 嵌套会导致瀑布请求链变长，显著拖慢整体样式就绪时间
兼容性与灵活性
@import 支持条件导入（如指定媒体类型），但现代浏览器已更推荐使用 <link media=”…”> 实现相同功能。
立即学习“前端免费学习笔记（深入）”；
<link> 还支持 rel=”preload”、rel=”prefetch” 等高级预加载策略，便于精细化控制资源加载优先级，@import 不具备这类能力。
实际性能对比示例
假设 index.css 使用 @import 引入 theme.css：
浏览器流程为：加载 index.html → 发现 <link href=”index.css”> → 下载 index.css → 解析到 @import “theme.css” → 再下载 theme.css → 所有样式就绪 → 渲染页面
若改用两个 <link> 标签：
浏览器可在解析 HTML 时同时发起 index.css 和 theme.css 的请求，节省一轮往返时间（RTT），页面更快进入可交互状态。
基本上就这些。从性能角度出发，应优先使用 <link> 标签引入 CSS，避免在关键路径中使用 @import，尤其是首屏相关样式。@import 更适合用于模块化 CSS 架构中的非关键样式合并，而非性能敏感场景。不复杂但容易忽略。