HTTP/2 多路复用由协议层自动实现，前端无需手动开启，关键在于服务端启用 HTTPS 并正确协商 h2、统一域名避免分片、用 preload 提前触发关键图请求并设置 as="image"。
直接配置 HTTP/2 本身不需前端“手动开启”，关键在于确保环境支持、资源组织合理，并避免破坏复用机制。多路复用是协议层能力，浏览器在单个 TCP 连接上自动并发处理多个请求——但前提是你的 HTML 和部署方式不把它“关掉”。
确保服务端和传输层真正启用 HTTP/2
这是前提，否则所有优化都无效：
- 使用 HTTPS（推荐）：服务端必须正确配置 TLS，并在 ALPN 协商中声明 h2；浏览器仅在 ALPN 成功协商为 h2 时才走 HTTP/2 流程
- 验证是否生效：在 Chrome DevTools 的 Network 面板查看协议列，确认图片请求显示为 h2（不是 http/1.1 或 h2c）
- 避免 h2c（明文 HTTP/2）：开发环境调试可用，但生产环境不建议；多数 CDN 和主流服务器（Nginx、Caddy、Cloudflare）默认只对 HTTPS 启用 HTTP/2
统一域名，禁用域名分片
HTTP/1.1 时代常用的 static1.example.com / static2.example.com 做法，在 HTTP/2 下反而严重损害性能：
- 每个子域名触发独立 TLS 握手 + SETTINGS 帧协商，增加延迟
- 连接无法共享，小图请求被隔离在不同 TCP 连接上，多路复用失效
- 浏览器对同一主域名（如 https://example.com）默认只建 1 个 HTTP/2 连接，却能并发承载数百个流——足够应对海量小图
用 preload 提前抢占复用通道
HTML 解析是线性的，等遇到 标签才发起请求会浪费复用带宽空窗期。preload 可在解析早期就触发请求：
立即学习“前端免费学习笔记（深入）”；
- 对首屏关键小图（如头像、图标、导航图）加
- as="image" 必须写，否则浏览器不会设置正确的 Accept 头和缓存策略
- 避免 preload 非关键图（如页脚广告图），防止挤占首屏资源的流优先级
配合服务端流优先级（可选但有效）
HTTP/2 允许为不同请求分配优先级，浏览器会通过 HEADERS 帧发送权重信号。虽然现代浏览器实现较简略，但仍可辅助调度：
- 首屏小图（
）天然获得更高初始优先级
- 若后端支持（如 Nginx 1.25+、Envoy），可通过响应头 Priority: u=3, i 显式提示“高重要性且不可推迟”
- 注意：不要依赖 Server Push（已废弃），它无法取消、易造成冗余传输
不复杂但容易忽略：HTTP/2 多路复用不是靠前端代码“调用某个 API”启用的，而是靠部署规范和 HTML 编写习惯释放出来的底层能力。
