最有效解法是用<link rel="stylesheet">替代@import，因后者在CSS解析阶段才触发请求，导致串行加载、阻塞CSSOM构建和渲染；需将所有@import文件改为独立<link>并按依赖顺序置于<head>中，媒体查询移至media属性。
直接换用 <link rel="stylesheet"> 是最有效、最可控的解法。@import 不是“慢一点”，而是从加载机制上就卡住了关键渲染路径。
为什么 @import 会阻塞 CSSOM 构建
@import 是 CSS 解析阶段才触发的请求，浏览器必须等当前 CSS 文件下载完成、开始解析、遇到 @import 那一行，才会发起下一个 CSS 请求。这导致：
- 无法与 HTML 解析并行 ——
<link>在 HTML 解析时就被预加载器发现，@import要等到 CSS 解析器“读到它”才动身 - 多层嵌套直接变瀑布链 ——
A.css→@import "B.css"→B.css里再@import "C.css"，实际加载顺序是 A → B → C - CSSOM（CSS 对象模型）必须等所有
@import内容就绪才能完成，而渲染树构建被死锁在这一步
怎么把 @import 全替换成 link 标签
不是简单搜索替换语法，而是重构资源声明位置和依赖顺序：
- 用文本搜索定位所有
@import：包括@import "reset.css";、@import url(utils.css);、@import 'theme.css' (prefers-color-scheme: dark); - 把每个被导入的文件（如
reset.css、utils.css）保留为独立文件，不再由其他 CSS 引用 - 在 HTML 的
<head>中按依赖顺序插入<link>，例如：<link rel="stylesheet" href="reset.css"><br><link rel="stylesheet" href="utils.css"><br><link rel="stylesheet" href="main.css">
- 媒体查询要平移过去：
@import url(print.css) print;→<link rel="stylesheet" href="print.css" media="print">
link 标签加哪些属性能进一步提速
<link> 支持运行时控制，@import 完全没有对应能力：
立即学习“前端免费学习笔记（深入）”；
- 对非关键 CSS 加
media属性，比如media="(min-width: 0) and (max-width: 0)"或media="print"，浏览器会异步加载、不阻塞渲染 - 首屏关键样式必须用无
media的<link>，且确保它出现在<head>靠前位置 - 构建工具（如 Vite、Webpack）中，删掉源 CSS 里的
@import，改用 JS 侧import "./reset.css"，可自动提取为带哈希的<link>
容易被忽略的坑：第三方 CSS 和构建流程
真正难搞的不是你自己写的 @import，而是：
- 第三方 UI 库文档里写的
@import示例（比如旧版 Bootstrap 或某些 Web Component 封装），上线前必须转成<link>或内联合并 - SCSS/Less 的
@import是编译期行为，和 CSS 原生@import完全不同——但名字一样，很容易在审查 Network 面板时误判“没用 @import” - 动态插入
<style>并写入@import（比如某些主题切换脚本），等于主动放弃预加载器，这种写法比静态@import更慢
性能损耗不是线性的。实测三层 @import 嵌套，在弱网下比等价 <link> 多出 500ms+ 首字节延迟 —— 这个时间足够触发一次 FOUC 或 Lighthouse 报警了。
