http/2多路复用本身不自动加速css加载，仅支持同域多个css文件并发传输；真正优化需控制加载时机、禁用@import、区分关键/非关键样式、验证protocol为h2且同域名，并避免解析阻塞与顺序错误。
HTTP/2 多路复用本身不自动让多个小 CSS 文件“更快”，它只是让它们能并发走同一连接；真正有优势的前提是：你**控制了加载时机、规避了解析阻塞、且服务端和浏览器都按预期工作**。否则，拆分反而增加 CSSOM 构建次数和潜在顺序错误风险。
多路复用不等于并行解析完成
浏览器对每个 <link rel="stylesheet"> 都会触发独立的下载 → 解析 → CSSOM 构建流程。即使 5 个 CSS 文件在 h2 下几乎同时抵达，它们仍要逐个解析——尤其是当存在 @import 或跨文件变量依赖（如 CSS 自定义属性未声明在前）时，解析可能串行卡住。
- Chrome DevTools 的
Network面板显示 Protocol 是h2，不代表 CSSOM 构建没瓶颈 - 用
Performance面板查看Parse Stylesheet和Recalculate Style时间，常比Content Download长得多 - 多个小文件意味着更多
StyleSheet对象实例，GC 压力略增（尤其低端 Android 设备）
哪些场景下拆分确实更优
不是“越多越快”，而是“按需拆、可控加载”才有意义。典型有效场景：
-
print.css用media="print"，完全不阻塞主渲染流 -
dark-theme.css配合prefers-color-scheme: dark或 JS 动态切换，避免首屏加载无用样式 - 第三方 UI 库样式（如
antd.css）独立引入，缓存策略可与业务 CSS 分离，更新时不污染主包 - 非首屏组件样式（如
chart-widget.css）配合<link rel="preload" as="style" onload="this.rel='stylesheet'">异步加载
容易踩的坑：你以为在用多路复用，其实没有
常见失效链路：
- 页面用了
http://协议 → 强制降级为 HTTP/1.1，Protocol列显示http/1.1 - CSS 文件来自不同域名（如
cdn.example.com/a.css+app.example.com/b.css）→ 各自建立连接，无法共享流 - HTML 中写了
@import url("base.css")在theme.css里 → 浏览器必须等theme.css下载完再发请求，彻底破坏并发 - 服务器 TLS 握手慢或 initial window size 过小 → 小文件密集帧调度反而放大延迟（尤其弱网）
最常被忽略的一点：拆分后，<link> 标签顺序决定层叠权重，也决定解析启动时机。把 reset.css 放最后，或者把 theme.css 放 base.css 前面，样式就不可控——这和协议无关，是 HTML 加载模型本身的约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
