使用替代嵌套@import可避免链式加载，实现并行下载，缩短首屏渲染时间，提升页面性能。
多个 @import 在 CSS 中嵌套使用会导致阻塞式加载，每遇到一个 @import，浏览器必须下载并解析当前样式表后才能发起下一个资源请求，形成“链式加载”，严重影响页面渲染性能。为提升加载效率，推荐改用 方式集中引入 CSS 资源。
问题：@import 的加载缺陷
• @import 是在 CSS 文件内部调用其他 CSS，属于“运行时”导入，会延迟主样式生效时间。• 多层嵌套时无法并行下载，必须逐个加载，增加白屏或样式闪烁风险。
• 阻塞关键渲染路径，尤其在移动端或弱网环境下体验更差。
解决方案：使用 标签并行加载
将所有外部样式表通过 HTML 的<link rel="stylesheet"> 直接引入，可实现：- 浏览器在解析 HTML 时尽早发现资源，提前发起请求
- 多个 link 标签之间互不依赖，支持并行下载
- 避免 CSS 解析过程中的等待，加快首屏渲染速度
示例优化前后对比：
❌ 原始写法（慢）：
/* main.css */
@import url('reset.css');
@import url('layout.css');
@import url('theme.css');
<p>/<em> HTML中只引入一个 </em>/
<link rel="stylesheet" href="main.css"></p>✅ 优化后写法（快）：
/* 不再使用 @import，直接在 HTML 中引入 */ <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="theme.css">
进一步优化建议
• 合并小文件：若多个 CSS 文件体积较小，可合并成一个以减少请求数（权衡并行与合并）。• 预加载关键资源：
<link rel="preload" as="style" href="critical.css"> 提升优先级。• 使用媒体查询分离非关键 CSS：
<link rel="stylesheet" href="print.css" media="print"> 避免阻塞渲染。基本上就这些。用 <link> 替代嵌套 @import，让浏览器更高效地加载样式，是提升前端性能的简单有效做法。
立即学习“前端免费学习笔记（深入）”；
