http/2多路复用通过消除请求排队、共享连接提升首屏资源并发加载效率，需收敛域名、启用https、避免同步脚本阻塞、配合preload及精简资源体积。
HTTP/2 多路复用本身不直接“降低单个资源的响应时延”，但它能显著减少首屏资源整体加载耗时，核心在于消除请求排队等待——尤其在高延迟网络下效果突出。关键不是让服务器更快返回数据，而是让浏览器更早、更并发地发出所有首屏请求，并让它们共享通道、互不阻塞。
聚焦首屏资源，收敛域名并启用 HTTPS
多路复用只在单个 HTTP/2 连接内生效。若首屏 CSS、JS、图标分别来自 cdn.example.com、static.example.com、api.example.com，浏览器会为每个域建独立连接，无法复用。应将首屏静态资源尽量收敛到 1–2 个同源域名下（如统一走 static.example.com），并确保该域名已配置 TLS + ALPN 协商支持 h2。没有 HTTPS，现代浏览器不会启用 HTTP/2。
避免同步脚本打断资源发现时机
即使启用了 HTTP/2，一个未加 async 或 defer 的外部 <script></script> 仍会阻塞 HTML 解析。后续的 <img>、<link rel="stylesheet"> 标签无法被解析器及时读取，也就无法触发请求——此时 TCP 连接空闲，但浏览器“不敢发”。建议：
- 首屏 JS 尽量使用
defer（保证执行顺序）或async（无依赖时） - 必须同步执行的初始化逻辑，优先打包进内联脚本或与关键 CSS 合并在同一 HTML 中
- 移除非首屏必需的同步第三方脚本（如分析、广告）
配合 preload 提升关键资源调度优先级
HTTP/2 支持流优先级提示，但浏览器实际实现已简化。不过 <link rel="preload"> 仍非常有效：它不阻塞 HTML 解析，却能让浏览器提前发起关键资源请求，并在复用连接中给予更高调度权重。仅对真正首屏渲染强依赖的资源使用：
- above-the-fold 的 CSS（尤其是阻塞渲染的
<link>） - 主入口 JS（如 React/Vue 的 runtime + main chunk）
- 首屏核心图片（如 banner 图，可搭配
fetchpriority="high"）
注意：preload 不等于自动执行，JS 仍需正常 <script></script> 引入；也不要为字体、页脚模块等非关键资源 preload，会挤占带宽。
精简首屏资源体积，让多路复用真正见效
多路复用改善的是“并发传输效率”，不是“传输总量”。如果首屏 CSS 有 500KB、JS 打包成 3MB 巨包，即使走 HTTP/2，下载和主线程解析执行时间依然很长。务必同步做减法：
- 提取并内联关键 CSS（Critical CSS），其余 CSS 异步加载
- 利用代码分割（如 React.lazy + Suspense），确保首屏只加载必要组件代码
- 压缩图片、启用 WebP/AVIF、合理设置尺寸，避免大图拖慢 LCP
小资源多时提升最明显——HTTP/2 的头部压缩（HPACK）+ 复用，让几十个图标、字体、CSS 规则的请求几乎零排队，首屏 LCP 和 FCP 更稳定。
