HTTP/2 多路复用是什么
-
问题（HTTP/1.1）
同一域名通常最多开 6 个并发 TCP 连接；同一连接内"串行"请求 ，容易出现队头阻塞（HOL）：前面的响应慢，后面的都得等。于是我们过去会做域名分片、雪碧图、打大包等"曲线救国"。 -
HTTP/2 的做法
一个域名，只建立 1 个 TCP 连接， 在这一个TCP连接上，并行承载多条流（stream）（常见浏览器支持100条流，并发） ，请求与响应被切成**帧（frame）**交错传输。
关键特性：
-
多路复用：多条流并行、互不抢道（在 HTTP 层解决 HOL）。
-
头部压缩（HPACK）：大幅降低重复 Header 的体积。
-
优先级/依赖：可标注哪些流更重要（实际实现已简化，但仍可通过"优先级提示"影响调度）。
-
单连接、TLS + ALPN：浏览器里基本都走 TLS，协商到 h2。
-
注意：HTTP/2 仍然跑在 TCP 上，TCP 层丢包会带来连接级的 HOL。HTTP/3（基于 QUIC/UDP）才从传输层根治这个问题。
对前端的直接收益
-
减少"等待排队"的时间
同一域的资源不再排成队串着下，瀑布图更扁，慢资源不会卡住其他资源。
-
告别很多"旧时代技巧"
-
域名分片：通常不再需要，反而会增加握手和 TLS 开销，破坏连接复用/合并。
-
雪碧图：失去必要性（但图标仍建议用 Icon Font/SVG Sprite 出于其他考虑）。
-
"必须把所有 JS 打成一个巨包" ：不必。更倾向按需加载/代码分割。
-
-
整体耗时更稳定
小资源多的时候提升明显（因为头部压缩 + 复用），首屏/LCP经常能受益。
不能指望它解决的事
-
字节就是字节 ：传输总量不变/更大时不会变快------资源体积优化仍是第一优先。
-
解析与执行阻塞 ：JS 执行、样式计算、布局绘制这些主线程工作与 HTTP/2 无关。
-
跨域第三方：每个域一套连接；第三方脚本多仍然会慢。
-
TCP 丢包：会在连接层面"全体等一等"；HTTP/3 才能缓解。
前端实战：怎么"用好"HTTP/2
1）连接与域名策略
-
减少域名 ：尽量将同站静态资源收敛到少数域，利于单连接复用 与证书覆盖。
-
预连接：对首屏必须的第三方域名使用
<link rel="preconnect" href="https://static.example.com" crossorigin> <link rel="dns-prefetch" href="https://static.example.com">让 DNS/TCP/TLS 提前做，复用更快生效。
2）加载优先级与调度
-
为关键资源设定高优先级（浏览器调度 + HTTP/2 流优先级配合）
-
LCP 图：
<img src="/hero.webp" fetchpriority="high" width="1200" height="600" alt=""> -
关键 CSS：
<link rel="preload" href="/critical.css" as="style"> <link rel="stylesheet" href="/critical.css"> -
关键字体：
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
-
-
非关键资源降级
-
路由级/下屏资源：
rel="prefetch"（空闲带宽拉取）。 -
图片懒加载：
<img loading="lazy">。
-
3）代码与资源切分策略（在 HTTP/2 时代）
-
按需分包，但别过度碎片化：
-
过多极小文件（如 5--10KB 一堆）会降低 gzip/brotli 压缩收益、增加请求管理开销。
-
经验法则：以路由/功能为维度 切分，确保关键路径文件数量可控（比如首屏核心 JS/CSS 不宜超过少数几个）。
-
-
Tree-Shaking / 按需引入：仍然是减体积王道。
-
图片与字体 ：体积>数量。用 WebP/AVIF 、子集化字体、
font-display: swap。
4）感知白屏：关键路径最小化
-
关键 CSS 内联（Critical CSS）减少首屏阻塞；其余 CSS 延后。
-
骨架屏 ：并不加速网络，但显著降低白屏感知。
-
SSR/SSG + Hydration：把"可见内容"先送达，HTTP/2 负责把后续资源并行拉齐。
5）配合现代提示信号（浏览器→服务器）
-
<link rel="preload">：明确告诉浏览器"立刻要"。 -
fetchpriority：细化图片/脚本的下载优先级。 -
103 Early Hints（可选，服务端支持）：在正式响应前就把预加载清单发给浏览器（对 h2/h3 都有帮助）。
-
Service Worker：让首屏关键文件命中本地缓存，网络只负责增量。
落地检查清单（给前端）
-
站点已启用 HTTP/2（h2）（DevTools Network 面板 Protocol 列应为 "h2"）。
-
统一静态域名，不做域名分片 ；关键第三方使用 preconnect。
-
首屏 LCP 资源 （首图/首屏 CSS/字体）设置 preload / fetchpriority=high。
-
代码按路由/功能合理分包，避免几十个迷你 chunk。
-
图片使用 现代格式 + 响应式 + 懒加载 ；字体子集化 + swap。
-
关键 CSS 内联 ，其余延后；骨架屏降低白屏感知。
-
线上用 Web Vitals（LCP/CLS/INP）与瀑布图核验优先级是否生效。
常见误区
-
"上了 HTTP/2 就可以为所欲为"：不行。带宽、丢包、CPU、字节数都是真实世界。
-
"把 JS 切得越细越好" ：过度切分会压缩收益变差、初始化请求过多。
-
"HTTP/2 会让阻塞脚本不阻塞" ：解析/执行阻塞照旧，记得
defer/async和"移出关键路径"。 -
"第三方多也没关系"：每个第三方都是一套握手 + 独立调度，复用不了。谨慎引入。
如果你愿意，我可以基于你当前项目（框架、打包器、CDN、资源分布）给一份HTTP/2 友好的首屏加载改造方案（逐项落地到 HTML 标签与打包配置上）。