@import强制串行加载，因属CSS语法而非资源声明，浏览器须等当前CSS下载解析至该行才发起请求，且预加载器不可见，导致关键渲染路径阻塞、首屏延迟及FOUC。
因为@import强制浏览器串行加载，打断关键渲染路径的并行发现与请求，首屏样式可用时间被硬性推迟。
为什么@import会让浏览器串行加载
@import是CSS语法的一部分，不是资源声明——浏览器必须等当前CSS文件下载完成、开始解析、读到@import那一行，才发起被导入文件的请求。HTML预加载器（preload scanner）完全看不到它，所以reset.css的请求要等到main.css全部下载完+开始解析后才启动。
- Network面板里Initiator显示为
stylesheet（而非parser），就是典型信号 - HTTP/1.1下更致命：单域名并发连接数通常只有6个，
@import还会额外占一个“隐式连接槽” - HTTP/2虽支持多路复用，但
@import仍受限于CSS解析顺序，无法提前预加载
@import的media参数根本不管下载时机
写@import url("dark.css") (prefers-color-scheme: dark);，浏览器依然会在页面初始化阶段无差别下载dark.css，哪怕用户用的是亮色模式。它的media只控制规则是否“生效”，不控制是否“下载”。
- 真正能跳过请求的写法是：
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)"> - 同理，
media="print"、media="(max-width: 768px)"在<link>中才能实现物理隔离 - 把
@import的media直接平移到<link>上，不是语法替换，而是加载逻辑重写
嵌套@import会让FOUC和白屏更明显
两层嵌套（如main.css → theme.css → utils.css）在弱网下常导致CSSOM构建延迟600ms+，DOM内容先渲染、样式后到，用户看到「文字乱排→突然整齐」的闪烁（FOUC），移动端尤其刺眼。
立即学习“前端免费学习笔记（深入）”；
-
@import在<style>标签内比外链CSS更晚执行，且完全逃不过预加载器 - 无法用JS监听或控制其加载状态，
onload事件不触发，document.styleSheets里也查不到中间态 - 跨域
@import还会触发CORS预检，进一步拉长等待时间
真正容易被忽略的是：构建工具里的@import未必安全。你在SCSS里写了@import "vars"，以为没问题，但上线后dist/main.css里如果还明文存在@import url("legacy-theme.css")，那才是拖慢首屏的真凶——得打开最终产出的CSS文件手动确认。
