探究http2的多路复用实用场景

http2多路复用概念

在web.dev对http2.0的描述中,多路复用有如下特性。

将HTTP消息分解为独立的帧、交错传输,然后在另一端重新组装它们的能力是HTTP/2最重要的增强功能。事实上,它在所有web技术的整个堆栈中引入了众多性能优势的连锁反应,例如:

  • 并发多个请求,不阻塞任何一个请求。
  • 并发排列多个响应,不阻塞任何一个响应。
  • 使用单个TCP连接可以并行传递多个请求和响应。.
  • 删除不必要的HTTP/1.x解决方案(请参阅优化HTTP/1.x,如级联文件、图像精灵和域碎片)。
  • 通过消除不必要的延迟和提高可用网络容量的利用率,降低页面加载时间。.

其实总的来说,就是使用帧(frame)进行数据传输,使得同一个域下的所有请求,可以在一个TCP连接中进行传递,最高效率的利用信道负载。

http2多路复用实际场景分析

下面构造一些实际场景,对比http1.1和http2.0的效果:

1. 请求堵塞

先用nginx模拟一个要等待10s的请求,longTask:

实际情况下,这种服务端耗时大的请求常常是主要的页面的性能瓶颈之一。

那么运行以下代码:

js 复制代码
for(let i = 0; i < 100; i++) {
    fetch(`https://localhost:8094/longTask${i}`)
}

http1.1效果:

http2效果:

这对比效果就很明显了,http1.1因为同一个域下只有6条TCP链接上限,故100个堵塞请求并发,后面的请求需要等前面的请求都完成才能触发。可以看到,等待时间已经达到2.7min。

而http2可以将请求并发(看起来也不是能直接并发所有请求,最后一个请求有2s的延迟,可能和信道的传输上限有关)。直接避免了因为堵塞的请求造成的网络性能问题。

2. 大量请求或者文件下载

使用一个加载时间大约9s的视频资源作为测试

运行下列代码:

js 复制代码
for(let i = 0; i < 1000; i++) {
    fetch("https://localhost:8096/video/1.mp4")
}

http1.1效果:

http2效果:

在这个案例中,http1.1和http2所花时间耗时基本相同。因为下载视频的时间都是处于content download阶段,是一直需要信道资源的,所以虽然http2可以使用分帧传输,但是在信道资源被占满的情况下,后续的请求也只有进行等待了。

在上一个案例中,等待的阶段是waiting for serve response 这个时候虽然有100并发,但是信道基本是空载的,没有信息帧传输,所以才能达到100请求同时完成的效果。

总结

综上所述,http2.0的多路复用虽然能解决类似请求堵塞造成的性能问题,但是前端依然需要在方案层面严格控制请求并发,大量的请求仍然会对实际生产场景产生堵塞问题。

相关推荐
Pioneer0000110 小时前
我用 Redis + 网关做多模型 API 路由:缓存命中率 95%+ 的工程实践
人工智能·redis·后端·缓存·性能优化·架构
ZFJ_张福杰10 小时前
【Flutter】Flutter 中有哪些耗时操作?从 UI 卡顿到 Isolate 性能优化
flutter·性能优化·卡顿·isolate
政企项目老覃11 小时前
金融转账“幽灵失败“排查实录:从本地消息表到 Seata TCC 的选型与权衡
数据库·程序人生·性能优化·数据分析·系统架构
爱喝水的鱼丶12 小时前
SAP-ABAP:MM 模块供应商主数据开发:字段扩展、分级管控与同步接口开发
开发语言·性能优化·接口·sap·abap·增强·经验交流
贾伟康12 小时前
【HarmonyOS 7新能力|050】Core File Kit mmap工程封装:把接入逻辑放进可维护的分层结构
性能优化·harmonyos·arkts·文件系统·mmap
贾伟康13 小时前
【HarmonyOS 7新能力|045】LazyLayoutAlgorithm工程封装:把接入逻辑放进可维护的分层结构
性能优化·harmonyos·arkts·arkui·懒加载
打工仔折腾 AI13 小时前
数据库上 K8s 之后谁来管?拆解金仓 KES-Operator 的声明式运维方案
人工智能·后端·python·性能优化·ai agent 实战
hanchenxing13 小时前
正则表达式回溯陷阱:用最小示例避开灾难性回溯正则表达式
性能优化·回溯陷阱
HwJack201 天前
【HarmonyOS开发小实践】ArkUI 动画系统属性动画、显式动画与路径动画
ui·性能优化·harmonyos
碳基修炼1 天前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http