CSS文件数量多不致命，真正拖慢首屏的是多个<link rel="stylesheet">同时参与初始CSSOM构建；应内联关键CSS，并用media="print"+onload或rel="preload"+onload异步加载非关键CSS，而非挪至</body>底部。
直接说结论：CSS 文件数量多本身不致命，真正拖慢首屏的是多个 <link rel="stylesheet"> 同时参与初始 CSSOM 构建；解决不是删文件，而是控制哪些 CSS 参与首屏渲染、哪些延迟加载。
为什么把 <link> 挪到 </body> 底部是错的
浏览器解析 HTML 是顺序执行的，<link rel="stylesheet"> 出现在哪一行，就卡在哪一行——哪怕它在 </body> 前最后一行，HTML 解析器走到它时仍会暂停，等 CSSOM 构建完才继续。
- 此时 DOM 已基本完成，但没样式，用户看到 FOUC（无样式内容闪现）
- 后续 JS 调用
getComputedStyle或offsetHeight会读到错误值 - 旧版 Safari 还可能因此触发重排
- Webpack/Vite 输出的
<link>若被手动移到底部，会破坏资源优先级和缓存复用逻辑
用 media="print" + onload 实现零 JS 兼容异步
这是目前最轻量、兼容性最好的方案，IE11 都能跑通。原理是浏览器对 media="print" 的样式默认懒处理：下载不阻塞 HTML 解析，也不参与初始 CSSOM。
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'; this.onload=null;">-
onload中必须立刻执行this.media='all'，否则样式永不生效 - 必须加
this.onload=null，否则旧版 Safari 可能重复触发 - IE 不支持
onload，需 fallback 到onreadystatechange（loadCSS库已内置） - 别用
media="(min-width: 9999px)"这类假条件，2026 年起部分浏览器已拒绝识别
用 rel="preload" + onload 预加载关键但非首屏 CSS
适合你明确知道某份 CSS 会在交互后立即用到（比如深色主题 dark.css 或弹窗组件 modal.css），想提前下载但不让它干扰 LCP。
立即学习“前端免费学习笔记（深入）”；
<link rel="preload" href="dark.css" as="style" onload="this.rel='stylesheet'; this.onload=null;">-
as="style"必须写，否则 Chrome/Firefox 不提升优先级，甚至忽略预加载 -
href值要和最终<link rel="stylesheet">完全一致（含 query 参数），否则缓存不复用 - 务必配
<noscript><link rel="stylesheet" href="dark.css"></noscript>，覆盖禁 JS 场景和 Safari 11.1 以下 - 动态创建
<link>时，onload在 Firefox 69 之前和部分 Android WebView 中不可靠，建议用loadCSS库或 fallback 到onreadystatechange
为什么 @import 比 <link> 更危险
@import 不是 HTML 原生加载机制，它在 CSS 文件内部使用时，会强制串行解析：浏览器必须先下载并解析完当前 CSS 文件，才能发起 @import 指向的下一个请求。这意味着关键样式无法被预加载器提前抓取，加载链路拉长，首屏 CSS 就绪时间显著延迟。
- 嵌套多层
@import（如 A.css → @import B.css → @import C.css）会让延迟呈指数级放大 - IE 及部分旧浏览器会等到 DOM 完全构建完毕后才执行
@import，此时 HTML 已开始渲染，但样式尚未就位，直接导致 FOUC - 即便放在
<head>里的<style>@import "";</style>，也绕不开上述阻塞逻辑 - 现代构建工具（如 PostCSS）虽支持
@import语法，但实际是编译期合并，不产生运行时@import，这点务必分清
最容易被忽略的点是：内联关键 CSS 必须放在 <head> 中 <meta charset> 之后首位，且不能含 @import；提取时要基于真实视口尺寸验证，而非抄前几 KB；media="print" 和 rel="preload" 的 href 必须和最终生效的路径完全一致，差一个 query 参数都会让缓存失效。
