使用@import会因串行加载导致渲染阻塞，而改用link标签可实现并行下载，提前触发资源请求，缩短关键渲染路径，提升页面首次渲染速度。
使用 @import 在 CSS 中引入多个样式文件会导致渲染阻塞，因为 @import 是串行加载的——浏览器必须先下载主 CSS 文件，再按顺序请求被导入的资源。这会延长关键路径，造成页面渲染延迟。
为什么 @import 影响性能？
@import 的本质是让 CSS 文件内部再去拉取其他资源，导致：
- 无法与 HTML 解析并行：@import 依赖主 CSS 下载完成才能触发后续请求
- 链式加载问题：多个 @import 会依次排队，形成“瀑布流”请求
- 阻塞渲染：直到所有导入的样式加载完毕，页面才开始布局绘制
用 <link> 替代 @import 实现并行加载
将样式引入从 CSS 层面移到 HTML 层面，利用浏览器对 <link rel="stylesheet"> 的预加载扫描机制：
- HTML 解析时，浏览器能提前发现所有 link 标签并立即发起请求
- 多个 link 并行下载，不互相等待
- 更早进入关键渲染路径，缩短首次渲染时间
示例对比：
立即学习“前端免费学习笔记（深入）”；
❌ 不推荐：串行加载/* main.css */
@import url('reset.css');
@import url('layout.css');
@import url('theme.css');✅ 推荐：并行加载
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="theme.css">
进一步优化建议
- 合并小文件：减少 HTTP 请求次数，将非关键样式合并或异步加载
- 使用 media 属性分离：如 print 样式不会阻塞渲染
- 预加载关键资源：
<link rel="preload">提升优先级 - 考虑内联首屏关键 CSS：避免外部请求延迟首屏渲染
基本上就这些。把样式加载从 CSS 的 @import 搬到 HTML 的 link 标签里，浏览器就能更快地并发处理，页面自然更早展现内容。不复杂但容易忽略。
