@import 比 link 慢是因为它导致 CSS 串行加载，而 link 支持 HTML 解析阶段并行预加载、DNS 预解析和 TCP 预连接，可避免 FOUC 和 render-blocking 问题。
@import 为什么比 link 慢
@import 是 CSS 内部的导入机制，浏览器解析到它时，必须先下载并解析完当前样式表，才能发起 @import 指向的资源请求。这导致串行加载：A.css → 解析 → 发现 @import "B.css" → 请求 B.css → 等待 B.css 下载完成 → 继续解析。而 <link> 是 HTML 解析阶段就发现的资源，支持并行预加载，且可被浏览器提前 DNS 预解析、TCP 预连接。
常见错误现象：DOMContentLoaded 延迟、首屏样式闪烁（FOUC）、Lighthouse “Eliminate render-blocking resources” 报警。
怎么把 @import 全换成 标签
核心是把 CSS 文件拆开，在 HTML 中用多个 <link rel="stylesheet"> 并列引入，而不是让一个 CSS 文件用 @import 拉另一个。
- 找到所有含
@import的 CSS 文件（比如main.css里有@import "reset.css"; @import "utils.css";） - 把这些被 import 的文件（
reset.css、utils.css）单独保留，不再被其他 CSS 引用 - 在 HTML 的
里，按依赖顺序写多个<link>，例如：<link rel="stylesheet" href="reset.css"><br><link rel="stylesheet" href="utils.css"><br><link rel="stylesheet" href="main.css">
- 确保顺序正确：依赖方（如
main.css）必须放在被依赖方（如reset.css）之后，否则 CSS 优先级或变量可能失效
link 标签加什么属性能进一步提速
单纯换 <link> 还不够，得配合关键属性减少阻塞和提升预加载能力：
立即学习“前端免费学习笔记（深入）”；
- 加上
media="print"或media="(min-width: 0)"可让浏览器不阻塞渲染（但注意：仅适用于非关键 CSS；主样式表别乱加） - 对非首屏用的 CSS（如打印样式、暗色主题），用
media="print"或media="(prefers-color-scheme: dark)"，浏览器会异步加载 - 想提前触发 DNS 查询？加
<link rel="dns-prefetch" href="//cdn.example.com">（注意是rel="dns-prefetch"，不是stylesheet） - 如果 CSS 在 CDN 上且路径固定，
crossorigin属性影响缓存和错误捕获，一般设为crossorigin="anonymous"
替换后要注意的兼容性和副作用
看起来只是“换个写法”，但实际会影响 CSS 作用域、加载时机和调试体验：
- CSS 变量（
:root定义）和@font-face声明只在当前文件生效 —— 如果原来靠@import把vars.css导入到main.css里，现在拆成两个<link>，变量依然可用（因为都在全局 CSSOM），但要注意：变量定义必须在使用前的<link>中 - IE9+ 和所有现代浏览器都支持多个
<link>并行加载，无兼容问题；但老项目若用了构建工具（如 Webpack 的css-loader+style-loader），需确认是否自动内联了@import，此时改 HTML 不生效 - 开发者工具里，CSS 文件来源变成多个独立请求，而不是嵌套在某个 CSS 文件里 —— 调试时别找错源头
- 如果原
@import是条件性的（比如@import url("theme.css") (prefers-color-scheme: dark);），不能直接挪成<link>，得用 JS 动态插入或保留该@import
最常被忽略的一点：构建流程里可能还藏着 @import —— 比如 Sass 编译后的 CSS 里仍有 @import，那 HTML 层面改了也没用。得去源码（.scss/.less 文件）里删掉或改成 @use / @forward，再重新构建。
