http/2多路复用仅提升同域名https下多个css的并发传输效率，不加速单文件；须满足https、同域名、protocol为h2三条件，禁用@import，按变更频率与使用范围拆分并内联首屏关键css。
HTTP/2 多路复用本身不加速单个 CSS 文件，只在多个 CSS 通过同一连接并发请求时起作用；盲目合并或硬拆都可能拖慢首屏——关键看是否同域名、是否 HTTPS、是否禁用 @import，以及是否按“首屏需要”和“变更频率”分组。
确认真正在用 HTTP/2 多路复用
配了 HTTP/2 不等于用了。必须满足三个硬条件：HTTPS（localhost 需配本地证书）、同域名、Protocol 列显示 h2。
- Chrome DevTools → Network → 右键表头勾选
Protocol，所有 CSS 请求必须是h2；出现http/1.1或h3说明降级或未启用 -
http://域名下永远 fallback 到 HTTP/1.1，强制 HTTPS 是前提 - 跨域 CSS（如
cdn.example.com/style.css和app.example.com/base.css）会建新连接，无法共享流——CDN 域名必须与主站一致，或用preconnect提前建立连接
禁用 @import，改用独立 <link> 标签
@import 是串行黑洞，HTTP/2 下照样破坏并行性：浏览器必须下载并解析完当前 CSS 才发起下一个请求，且无法被构建工具静态分析。
- 删掉所有 CSS 文件内的
@import url("...")，也绝不在<style></style>块里写它（现代浏览器会延迟加载，甚至等到 DOM 解析完） - 每个 CSS 改为独立
<link rel="stylesheet" href="base.css">，浏览器原生并行拉取 - 顺序决定层叠：
reset.css→base.css→theme.css→page.css，后引入的才能覆盖前面的
按变更频率和使用范围拆分，而非按“文件数量”合并
HTTP/2 下合并目标变了：不是省请求数，而是提升压缩率、缓存命中率和复用效率。把不变的基础样式和常变的业务样式混在一起，一改全失效。
- 应合并：
reset.css、utils.css、button.css这类每页都用、极少改动的 → 输出common.css - 必须拆开：
admin/dashboard.css、ab-test-v2.css、prefers-reduced-motion.css→ 单独加载，避免用户白下无用代码 -
print.css用media="print"，dark-theme.css用media="(prefers-color-scheme: dark)"，它们根本不阻塞渲染 - 构建时开启 Brotli（Nginx 配
brotli on;），10 个 10KB 文件分别压缩，比 1 个 100KB 文件压缩后体积更大
首屏关键 CSS 必须内联，非关键 CSS 异步加载
多路复用解决不了渲染阻塞——浏览器遇到第一个 <link rel="stylesheet"> 就暂停 HTML 解析，直到该 CSS 下载+解析完。5 个文件意味着最多 5 次阻塞点。
- 首屏强依赖的样式（导航栏、标题、按钮框架）必须内联到
，彻底绕过网络请求 - 非首屏样式（如
modal.css、chart.css）用<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">异步加载 - 不要滥用
preload：只预加载 LCP 相关资源；页脚广告 CSS 会挤占带宽，反而拖慢首屏 - 动态加载适合按需场景（如暗色主题切换），但需 JS 控制，要配
<noscript></noscript>兜底
最容易被忽略的是：多路复用只解决传输并发，不解决解析阻塞；而真正卡住首屏的，往往不是网络，是 CSS 下载完之后的解析与层叠计算——所以内联关键 CSS + 合理拆分 + 精准 preload，比纠结“到底该几个文件”重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
