17370845950

@import 比 link 慢，因其触发串行加载，无法与 HTML 解析并行，多层嵌套加剧延迟，不支持 media 预加载且存在旧浏览器兼容问题；应改用 head 中的 link 标签实现并行加载与优化。

直接用 @import 在 CSS 文件中引入其他样式表，确实容易导致渲染阻塞、加载变慢，尤其在多层嵌套或网络不佳时更明显。根本原因是 @import 会触发**串行加载**，浏览器必须先下载并解析当前 CSS，再发起被导入文件的请求，无法和 HTML 解析并行。

为什么 @import 比 link 慢

@import 是 CSS 规则，不是 HTML 标签，它只能写在 CSS 文件里（或 块中），浏览器识别它时已处于 CSS 解析阶段，此时：

• 无法与 HTML 解析、JS 下载等任务并发执行
• 多层 @import（如 A.css → @import B.css → @import C.css）会形成链式等待
• 不支持 media 属性的预加载优化（现代浏览器对 可延迟加载）
• 部分旧版浏览器（如 IE6–8）对 @import 的处理存在兼容性问题

改用 的正确写法

把原本写在 CSS 里的 @import url("xxx.css");，移到 HTML 的 中，用 显式声明：

进阶优化建议

仅替换 @import 为 还不够，配合以下做法效果更明显：

• 关键 CSS 内联到 HTML 的 中（首屏样式），减少阻塞
• 非关键 CSS（如主题、打印、动画）加上 media 属性，让浏览器延迟加载
• 使用 rel="preload" 提前获取重要样式（需搭配 as="style" 和 onload 注入）
• 启用 HTTP/2 或 HTTP/3，让多个 请求真正并行化（HTTP/1.1 下仍受限于域名请求数）

特殊情况处理

如果项目用了构建工具（如 Webpack、Vite），CSS 引入通常由模块系统管理，@import 实际在编译期被合并或转成 。这时重点应检查：

• 是否开启了 CSS 提取（如 mini-css-extract-plugin），避免样式被打包进 JS
• 是否误将大量第三方样式通过 @import 写在入口 CSS 中，导致单文件过大
• 开发环境热更新是否因 @import 路径变化引发全量重编译

不复杂但容易忽略——把 @import 拿出 CSS、放进 HTML 的 ，是提升首屏速度最直接有效的一步。