http/2 多路复用依赖统一域名和合理 html 写法才能生效：应避免子域名拆分、使用 preload 提前加载关键资源、慎用 server push、优先采用 link 响应头，并通过 devtools 验证协议与连接复用效果。
HTTP/2 多路复用本身是协议层能力，不靠改 HTML 标签实现，但 HTML 的写法会决定它能不能真正起效。关键不是“怎么用”，而是“别怎么破坏”——让浏览器能在一个连接上并发拉取多个资源。
统一域名，避免子域名拆分
HTTP/1.1 时代常用 static1.example.com、static2.example.com 这类多域名来绕过浏览器并发限制；但在 HTTP/2 下，这种做法反而有害：
- 每个子域名需独立 TLS 握手和 SETTINGS 协商，增加延迟
- 资源被隔离在不同 TCP 连接，无法共享流、无法统一调度优先级
- 证书或 SNI 差异可能导致连接无法复用
建议所有静态资源（CSS、JS、图片）都指向同一主域名，比如 https://example.com，哪怕托管在 CDN 上，也尽量配置为 CNAME 到主域或使用相同证书的子域。
用 preload 提前触发关键资源加载
浏览器按 HTML 解析顺序发起请求，<script src="app.js"></script> 要等解析到才发。而 <link rel="preload"> 可在早期就抢占复用通道：
<link rel="preload" href="/main.css" as="style"><link rel="preload" href="/hero.jpg" as="image">-
as属性必须准确填写，否则浏览器无法设置正确请求头和缓存策略 - 只预加载首屏关键资源，避免挤占带宽（如页脚广告 JS 就不该 preload）
慎用 Server Push，优先用 Link 头替代内联 HTML
Server Push 在 HTTP/2 早期被寄予厚望，但实际中容易造成资源冗余或阻塞：
- 推送的资源若已存在于客户端缓存，会被丢弃，浪费带宽
- 推送流占用流 ID 和服务器资源，可能影响真实请求响应
- 现代实践更推荐用响应头
Link: ; rel=preload; as=script替代 HTML 中的<link rel="preload">，更早触发、更可控
检查是否真启用了 HTTP/2 并验证复用效果
光写对 HTML 不够，得确认底层协议生效：
- Chrome DevTools → Network 面板 → 点击任意请求 → Headers 标签 → 查看
Protocol是否为h2 - 同域名下多个资源请求应显示相同 Connection ID，且时间线高度重叠（非串行）
- 避免混合 HTTP/1.1 域名（如同时引用 cdn.example.com 和 api.example.com），否则会分裂连接
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
