@import 会让 css 加载变慢，因为它强制串行加载，浏览器需等主样式表解析完才发起被导入文件请求，打断并行下载，延长关键渲染路径。
为什么 @import 会让 CSS 加载变慢
因为 @import 强制串行加载，浏览器必须等主样式表解析完、遇到 @import 规则后，才发起被导入文件的请求。这打断了原本可并行下载的资源调度。
比如 main.css 里写了 @import url("reset.css");，即使 reset.css 很小，它也得排队等 main.css 的网络传输 + 解析完成才能开始下载——而用 <link> 标签引入时，两个文件能同时发起请求。
- HTTP/1.1 下尤其明显：单域名并发连接数有限（通常 6 个），
@import还会额外占一个“隐式连接槽” - HTTP/2 虽支持多路复用，但
@import仍需按语法顺序解析，无法提前预加载 - 部分构建工具（如 Webpack）对
@import的静态分析能力弱，容易漏掉依赖或重复打包
@import 和 <link> 在关键渲染路径上的区别
浏览器构建渲染树前，必须获取并解析所有阻塞渲染的 CSS。用 <link rel="stylesheet"> 时，HTML 解析器一见到标签就立即触发下载；而 @import 是 CSS 语法的一部分，只有 CSS 解析器执行到那行才触发——此时 HTML 可能已解析过半，甚至 内容都快出来了。
-
<link>：HTML 解析 → 发起 CSS 请求 → 并行下载 → 解析 CSS → 构建渲染树 -
@import：HTML 解析 → 下载主 CSS → 解析主 CSS → 遇到@import→ 发起子 CSS 请求 → 等待子 CSS 下载+解析 → 才能继续构建渲染树 - 实测中，嵌套两层
@import可让首屏渲染延迟增加 300–800ms（视网络和文件大小）
哪些场景下 @import 表面看起来“没问题”，实际埋了雷
开发阶段本地服务器响应快、文件小，加上浏览器缓存加持，很难感知 @import 的代价。但上线后，CDN 缓存未命中、弱网、多层代理都会放大问题。
- 媒体查询中使用：
@import url("print.css") print;—— 看似只在打印时加载，但浏览器仍会在初始解析时下载该文件（除非是@import在@media块内且规则不匹配，但兼容性差） - SCSS/Less 中的
@import：这是预处理器指令，编译期就合并进输出 CSS，不产生运行时请求——但它和 CSS 原生@import完全不是一回事，名字相同极易混淆 - 动态插入
<style></style>并写入@import：不仅串行，还绕过了浏览器预加载器，基本等于放弃性能优化
替换方案与迁移注意事项
直接把 @import 换成 <link> 标签是最简单有效的解法，但要注意顺序和作用域。
- 多个
<link>的加载顺序由 HTML 中出现顺序决定，和@import的嵌套层级逻辑一致，迁移时保持原有位置即可 - 如果原
@import用于条件加载（如 IE 专用样式），改用<link>+media属性或
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
