HTML本身不控制HTTP/2多路复用,但其资源引用方式决定复用效果:preload可提前触发请求抢占带宽,同步script会阻塞解析浪费并发潜力,域名分片反而破坏复用,验证需看Protocol为h2且同域名请求Connection ID相同。

HTML 本身不会拖慢 HTTP/2 多路复用,但 HTML 的写法会决定你能不能真正用上多路复用——关键不在协议是否启用,而在资源是否真的走同一个连接、是否被浏览器及时调度。
为什么 HTML 中的 script 和 link 顺序会影响多路复用效果
HTTP/2 的多路复用是传输层能力,但浏览器发起请求的时机由 HTML 解析过程控制。遇到 <script src="a.js"></script> 才去发请求,而 <link rel="preload" href="b.css" as="style"> 可在解析早期就触发下载,抢占复用通道带宽。
- 同步
<script>会阻塞 HTML 解析,后续资源(哪怕在它下面)无法提前发起请求,等于浪费了多路复用的并发潜力 -
defer或async的脚本不阻塞解析,但执行时序不可控;若依赖关系没理清,仍可能报ReferenceError,这不是多路复用的问题,而是执行链断裂 - 多个
<link rel="stylesheet">按顺序加载,但 CSS 解析本身会阻塞渲染;用preload提前拉取,再用onload注入,才能真正释放流优先级
域名拆分(Domain Sharding)在 HTTP/2 下反而有害
HTTP/1.1 时代靠拆成 static1.example.com、static2.example.com 来突破浏览器 6 连接限制,但在 HTTP/2 下,每个额外域名都意味着一个新 TCP 连接 + TLS 握手 + 独立的 HPACK 动态表,直接抵消多路复用收益。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 所有静态资源(JS/CSS/图片/字体)应统一指向主域名,如
https://example.com - 第三方资源(如 CDN、分析脚本)可保留跨域,但需确认其服务端也支持 HTTP/2,否则会降级为 HTTP/1.1
- 若已用域名分片,Nginx 或 CDN 后台看到大量
http/1.1协议标识,就是典型信号
怎么验证多路复用真正在工作
别信瀑布图里“看起来并行”的时间线——那是 DevTools 的 UI 抽象,不是网络事实。只看两个硬指标:
立即学习“前端免费学习笔记(深入)”;
- 打开 Chrome DevTools → Network → 右键表头 → 勾选
Protocol列,所有同域名请求必须显示为h2(不是http/1.1或空) - 找两个资源(比如
main.js和logo.png),点开它们的 Headers → Response Headers,确认x-http2-connection-id(或类似字段,取决于后端实现)值完全相同 - 如果 Protocol 是
h2但 Connection ID 不同,说明后端用了连接池或负载均衡未透传,多路复用被切断
最容易被忽略的一点:Server Push 已被 Chrome 96+ 和 Firefox 90+ 彻底移除,任何还在 Nginx 配置里写的 http2_push 都是无效且干扰缓存的,直接删掉;真正的优先级控制,只靠 preload、fetchpriority="high" 或服务器返回的 PRIORITY 帧生效。


















