http/2多路复用仅在多个css文件通过同一连接并发请求时生效，单个css文件无法利用该特性；必须确保https、同域名、禁用@import、区分关键/非关键样式并合理拆分预加载，且protocol字段确认为h2。
HTTP/2 多路复用本身不自动加速 CSS 加载，它只在多个 CSS 文件**通过同一连接并发请求**时才起作用；单个 style.css 无论协议如何，都只占一个流——优化必须从资源组织和加载时机入手。
确认是否真在用 HTTP/2
多路复用的前提是协议生效，不是“配了就等于用了”：
- Chrome DevTools → Network 表头右键勾选
Protocol，所有 CSS 请求必须显示h2；若出现http/1.1或h3，说明降级或未启用 -
http://域名下永远 fallback 到 HTTP/1.1，必须 HTTPS（含 localhost 配本地证书） - 跨域 CSS（如
cdn.example.com/style.css和app.example.com/base.css）会建立独立连接，无法共享流
禁用 @import，改用独立 标签
@import 是串行加载黑洞，HTTP/2 下照样破坏多路复用：
- CSS 文件内写
@import url("reset.css")→ 浏览器必须先下载并解析完当前文件，再发下一个请求 - HTML 的
<style></style>块里写@import→ 大多数现代浏览器延迟加载，甚至等到 DOM 解析完成 - 正确做法：每个 CSS 拆成独立
<link rel="stylesheet" href="base.css">，浏览器原生并行拉取 - 注意顺序：
theme.css放在base.css后面，才能覆盖基础样式
按需拆分 + preload 关键 CSS
拆不是越多越好，关键看“是否首屏需要”和“是否能早触发”：
- 首屏强依赖的样式（导航、标题、按钮框架）必须内联到
，彻底绕过网络请求 - 非首屏样式（如
modal.css、chart.css）用<link rel="preload" as="style" onload="this.rel='stylesheet'">异步加载 - 避免滥用
preload：只预加载 LCP 相关资源，页脚广告 CSS 会挤占带宽 - 不要合并所有 CSS：把
print.css和dark-theme.css打进主包，用户切主题就得重下全部
合并仍有必要，但目标变了
HTTP/2 下合并 CSS 不是为了减少请求数，而是为了提升压缩率与缓存效率：
- 10 个 10KB 文件分别压缩，比 1 个 100KB 文件压缩后体积更大（Brotli 尤其明显）
- CDN 对单个大文件缓存命中率更高；但若合并粒度太粗（如把 admin 和 home 样式打包一起），首页用户就得下载后台专用规则
- 推荐逻辑分组：输出
base.css（重置+工具类）、theme.css（颜色/间距变量）、async-components.css（图表/编辑器等按需模块） - 构建时开启 Brotli（Nginx 配
brotli on;），比 Gzip 平均再省 15% 体积，对多路复用后的并发更友好
最容易被忽略的一点：多路复用解决不了 CSSOM 构建耗时。哪怕 10 个 CSS 并发下载完成，如果里面塞满未优化的 @media 嵌套、复杂选择器或冗余动画帧，浏览器解析仍卡顿。删掉没用的规则比调协议更重要——PurgeCSS 必须显式配置 content: ["./src/**/*.{js,ts,jsx,tsx}"]，否则对 className={styles[theme]} 这类动态类名会误删。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
