@import会拖慢首屏渲染，因为它是CSS解析阶段才触发的请求，浏览器无法在HTML解析阶段预加载，必须等主CSS下载解析完才能发起导入请求，形成硬性串行链，实测两层嵌套可使LCP延迟增加400–800ms。
为什么@import会拖慢首屏渲染
因为浏览器根本“看不见”它——@import是 CSS 解析阶段才触发的请求，而<link rel="stylesheet">在 HTML 解析阶段就被预加载器（preload scanner）捕获并立刻发起网络请求。这意味着：主 CSS 文件必须完整下载 + 解析完，才能开始拉取被 @import 的文件，形成硬性串行链。实测中，两层嵌套可让 LCP 延迟增加 400–800ms，弱网下更明显。
@import会阻塞 JS 执行且无法被 preload 识别
@import不是资源声明，而是同步阻塞指令。浏览器遇到它会暂停 CSS 解析，连带卡住后续 <script></script>（尤其没有 async 或 defer 的内联脚本）。更关键的是：@import url("theme.css") 这类写法完全逃逸预加载器扫描范围，浏览器直到解析完主 CSS 才知道要加载什么，彻底失去提前调度机会。
媒体查询里写@import也没用
看似写了 @import url("print.css") print;，但浏览器仍会在页面初始化时无差别下载该文件——它只跳过应用规则，不跳过请求。而 <link href="print.css" media="print"> 真正按条件懒加载，不占带宽、不阻塞渲染。同理，@import url("dark.css") (prefers-color-scheme: dark) 在多数浏览器中不生效或行为不一致，media 属性才是可靠方案。
构建工具和动态插入场景下完全失效
Webpack/Vite 默认不会处理原生 @import，它直接透传到运行时，导致额外 HTTP 请求；Sass 的 @import 是编译期合并，和原生 @import 完全不是一回事，混用极易出错。JS 动态插入 style.textContent = '@import url(x.css)' 会被静默忽略——@import 必须出现在 CSS 文件或 <style></style> 标签最顶部，且仅在初始解析时有效，运行时注入无效。
真正容易被忽略的点是：哪怕你只在单个 CSS 文件里用了一次 @import，它就足以打断整个关键渲染路径的并行能力。这不是“能用就行”的问题，而是浏览器机制决定的硬约束——只要存在，就必然引入串行依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
