前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • HTTP

    • 基础篇

      • HTTP的前世今生
      • HTTP是什么
      • HTTP世界全览
      • HTTP分层
      • 键入网址到回车发生什么
      • HTTP报文是什么样子的
      • 理解请求方法
      • URI
      • 响应状态码
      • HTTP有哪些特点
      • HTTP优缺点
      • HTTP的实体数据
      • HTTP传输大文件
      • HTTP的连接管理
      • HTTP的重定向
      • HTTP的Cookie机制
      • HTTP的缓存控制
      • HTTP的代理服务
      • HTTP的缓存代理
    • 高级篇

    • 扩展篇

  • 浏览器相关

  • 计算机基础

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

HTTP3展望|HTTP协议篇

# HTTP3展望

30 秒速记

  • HTTP/2 通过头部压缩减少协议头传输开销。
  • 二进制分帧把消息组织成更适合传输和调度的帧。
  • 多个请求与响应被划分为独立的流,并在同一连接上多路复用。
  • 这些机制显著改善了相对 HTTP/1 的传输效率。
  • 它解决的是 HTTP 层面的队头阻塞,不能据此认定整个传输链路已不存在阻塞。

HTTP/2 通过头部压缩、二进制分帧和多路复用,明显提升了相对 HTTP/1 的传输效率。 多个请求可以拆成独立的流,在同一连接中交错发送,不必等前一个响应完整结束,也减少了建立大量连接的成本。不过它解决的是应用层的队头阻塞,所有流仍共享底层 TCP 连接,丢包时仍可能一起等待。

我们一起学习了 HTTP/2,你也应该看到了 HTTP/2 做出的许多努力,比如头部压缩、二进制分帧、虚拟的“流”与多路复用,性能方面比 HTTP/1 有了很大的提升,“基本上”解决了“队头阻塞”这个“老大难”问题。

原理拆解: HTTP/2 先用 HPACK 压缩重复的请求头,再把请求和响应编码为二进制帧。每个帧携带所属流的标识,因此连接可以交错发送多个流的数据,而不必等前一个响应完整结束。浏览器加载页面时,HTML、CSS 和图片可以共享一条连接;某个大图片响应尚未结束时,CSS 对应的帧仍可被调度发送。这消除了 HTTP/1.1 串行使用连接时的应用层等待,也减少了为并发请求建立大量连接的成本。

最小验证: 输入一个支持 HTTP/2 的 HTTPS 地址,验证协商出的协议版本并观察响应头;将地址替换为待测服务即可执行。

curl --http2 -sS -o /dev/null \
  -w 'http_version=%{http_version}\nstatus=%{http_code}\n' \
  https://example.com/
@前端进阶之旅: 代码已经复制到剪贴板

--http2 允许通过 TLS 的 ALPN 协商 HTTP/2,%{http_version} 输出实际采用的版本。服务支持且链路未降级时,预期看到 http_version=2 和成功状态码;若输出 1.1,应检查服务器、反向代理和本机 curl 的能力,而不能仅凭页面加载速度判断协议。

边界与排查: 多路复用并不等于整条链路不存在阻塞。所有流仍共享底层连接、带宽和拥塞状态;连接发生丢包时,TCP 的按序交付可能让多个流一起等待。验证性能时应同时记录协议版本、连接复用情况、丢包率和往返时延,并区分服务器处理慢、优先级调度不合理与传输层阻塞,避免把任何请求变慢都归因于 HTTP/2。

面试官追问

追问 1商品详情页一次加载四十个图片和接口,架构师坚持为每批资源增加连接,认为单连接必然串行,HTTP/2 能否构成反例?
参考回答

能,HTTP/2 可让这些资源共享一条连接,并通过带流标识的二进制帧交错传输,不必等待前一个响应完整结束。HPACK 还能压缩重复请求头,减少多连接建立成本;但共享连接仍受总带宽、拥塞状态和底层传输影响。

追问 2前端声称生产站已启用 HTTP/2,依据只是首页比改造前快了,你会怎样在发布验收中验证实际协议?
参考回答

加载变快不能证明实际使用了 HTTP/2,应使用 curl --http2 并输出 %{http_version} 与状态码,确认结果确实为版本 2。若仍显示 1.1,需检查客户端编译能力、服务器和反向代理的 ALPN 配置;性能观感只能作为辅助证据。

追问 3弱网压测中,同一条 HTTP/2 连接上的十个资源一起停顿,产品经理要求关闭多路复用来消除队头阻塞,你同意吗?
参考回答

不应先关闭多路复用,因为同时停顿可能来自底层 TCP 丢包,而不是应用层流失效。应联合记录协议版本、连接复用、丢包率和往返时延,再核对重传情况;关闭复用会重新增加连接成本,也未必消除弱网传输瓶颈。

追问 4瀑布图里一个大图片尚未下载完,关键 CSS 也迟迟没有完成,测试据此断言二进制分帧没有生效,你会查哪些链路证据?
参考回答

资源完成顺序不足以否定分帧,应先确认两者是否复用同一 HTTP/2 连接,并观察不同流的帧是否交错发送。随后排查服务器处理慢、优先级调度不合理、带宽争用和 TCP 重传;只有结合协议与传输证据,才能区分流调度问题和底层阻塞。

追问 5技术负责人认为 HTTP/2 已彻底解决队头阻塞,因此移动端没有评估 HTTP/3 的价值,你会如何修正这项选型依据?
参考回答

该依据忽略了协议分层,HTTP/2 消除的是 HTTP/1.1 式应用层串行等待,多个流仍共同承载在一条有序的 TCP 字节流上。发生丢包时多个流可能一起等待;是否迁移仍要结合弱网表现、链路支持和部署成本,不能只凭“多路复用”定案。

# HTTP/2 的“队头阻塞”

30 秒速记

  • HTTP/2 的帧、流和多路复用消除了应用层请求之间的队首等待,但底层仍依赖 TCP。
  • 多个 HTTP/2 流交给 TCP 后,会被拆成按序传输的段;这些流最终共享同一条有序字节传输链路。
  • 发生丢包时,TCP 必须重传缺失数据;后续数据即使已经到达,也只能暂存在接收缓冲区。
  • 在缺失数据补齐前,上层应用无法取得后续数据,因此一次丢包可能同时拖住多个流。
  • 该问题来自 TCP 的有序可靠传输语义,单靠调整 HTTP/2 应用层机制无法根除。
  • 原文写作时将 HTTP/3 描述为草案阶段;其中关于发布状态的表述仅代表当时版本,核心演进方向是让 HTTP 改为运行在 QUIC 上。

HTTP/2 消除了应用层请求之间的排队,但无法解决底层 TCP 的队头阻塞。 多个流写入同一条 TCP 连接后,本质上仍是一串必须按序交付的字节;一旦某个数据段丢失,后续数据即使已经到达,也要等重传补齐后才能交给上层。这个问题来自 TCP 的可靠有序语义,因此调整 HTTP/2 的帧或流也无法根除,HTTP/3 才改用 QUIC 承载。

等等,你可能要发出疑问了:为什么说是“基本上”,而不是“完全”解决了呢?

这是因为 HTTP/2 虽然使用“帧”“流”“多路复用”,没有了“队头阻塞”,但这些手段都是在应用层里,而在下层,也就是 TCP 协议里,还是会发生“队头阻塞”。

这是怎么回事呢?

让我们从协议栈的角度来仔细看一下。在 HTTP/2 把多个“请求 - 响应”分解成流,交给 TCP 后,TCP 会再拆成更小的包依次发送(其实在 TCP 里应该叫 segment,也就是“段”)。

在网络良好的情况下,包可以很快送达目的地。但如果网络质量比较差,像手机上网的时候,就有可能会丢包。而 TCP 为了保证可靠传输,有个特别的“丢包重传”机制,丢失的包必须要等待重新传输确认,其他的包即使已经收到了,也只能放在缓冲区里,上层的应用拿不出来,只能“干着急”。

我举个简单的例子:

客户端用 TCP 发送了三个包,但服务器所在的操作系统只收到了后两个包,第一个包丢了。那么内核里的 TCP 协议栈就只能把已经收到的包暂存起来,“停下”等着客户端重传那个丢失的包,这样就又出现了“队头阻塞”。

由于这种“队头阻塞”是 TCP 协议固有的,所以 HTTP/2 即使设计出再多的“花样”也无法解决。

Google 在推 SPDY 的时候就已经意识到了这个问题,于是就又发明了一个新的“QUIC”协议,让 HTTP 跑在 QUIC 上而不是 TCP 上。

而这个“HTTP over QUIC”就是 HTTP 协议的下一个大版本,HTTP/3。它在 HTTP/2 的基础上又实现了质的飞跃,真正“完美”地解决了“队头阻塞”问题。

不过 HTTP/3 目前还处于草案阶段,正式发布前可能会有变动,所以今天我尽量不谈那些不稳定的细节。

这里先贴一下 HTTP/3 的协议栈图,让你对它有个大概的了解

原理拆解: HTTP/2 的流只存在于应用层。帧写入同一个 TCP 连接后,会变成连续的有序字节,再由 TCP 分段传输。假设流 A 的一个数据段丢失,而流 B 的后续字节已经抵达,接收端虽然可能确认已收到的范围,却不能越过缺口向应用交付后面的字节;直到重传补齐,HTTP/2 实现才有机会解析并分派这些帧。因此,一个段的丢失可能同时增加多个流的完成时间。

最小验证: 输入目标地址,创建一个 HTTP/2 连接并并发请求三个资源,验证多个请求确实复用同一会话。命令会输出协议调试信息和每个请求的完成结果。

nghttp -nv \
  https://example.com/ \
  https://example.com/index.html \
  https://example.com/favicon.ico
@前端进阶之旅: 代码已经复制到剪贴板

输出中的同一连接内会出现不同 stream_id,帧可交错出现,这证明应用层存在独立流。若某个资源返回 404,仍可观察协议行为;若提示命令不存在,需要安装提供 nghttp 的 nghttp2 客户端。这个命令不会主动制造丢包,所以不能仅凭一次正常结果证明没有传输层阻塞。

边界与排查: TCP 队头阻塞不代表每次丢包都会产生肉眼可见的长暂停,快速重传、较短的往返时延和接收缓冲可能掩盖影响;服务器计算、磁盘读取或应用限流也会形成相似瀑布图。工程验证应在受控测试环境中改变丢包率和时延,对比单流与多流的完成时间,并结合抓包中的重传、重复确认及时间戳判断。HTTP/3 已不应按早期草案状态理解,但其核心变化仍是以 QUIC 取代 TCP 承载 HTTP。

面试官追问

追问 1手机弱网里三个接口复用同一条 HTTP/2 连接,抓包显示前一个 TCP 段丢失、后两个段已经到达,为什么应用仍读不到后面的响应?
参考回答

因为 TCP 向上提供连续且有序的字节流,后到数据即使已进入接收缓冲区,也不能越过前面的缺口交给 HTTP/2 解析。只有重传补齐后,帧才能被解析并分派到各流;因此一个段丢失可能同时拖慢多个接口。

追问 2性能工程师用 nghttp -nv 并发请求首页、脚本和图标,看到不同 stream_id 后便宣布不存在队头阻塞,这份验证充分吗?
参考回答

不充分,不同 stream_id 和交错帧只能证明应用层多路复用生效,不能证明底层 TCP 从未阻塞。该命令不会主动制造丢包,应在受控环境改变丢包率与时延,并结合重传、重复确认和时间戳,对比单流与多流的完成时间。

追问 3团队准备把关键接口的 HTTP/2 流优先级调到最高,以解决一万台移动设备弱网下的丢包卡顿,这项改动能根治吗?
参考回答

不能根治,流优先级只能影响应用层帧的调度,无法绕过 TCP 的按序交付约束。关键段缺失时,后续字节仍需等待重传;调整优先级或许影响正常发送顺序,但还可能挤压其他资源,必须结合传输层指标评估。

追问 4线上瀑布图显示六个请求同时停顿两百毫秒,但抓包暂未确认重传,值班同事直接归因于 TCP 队头阻塞,你会如何收敛故障范围?
参考回答

不能仅凭同步停顿定性,还应检查服务器计算、磁盘读取、应用限流和流调度,因为它们可能形成相似现象。应关联同一连接的重传、重复确认、丢包与时间戳;快速重传和较短往返也可能掩盖影响,缺少传输证据时结论只能保持为假设。

追问 5架构评审在 HTTP/2 多开几条 TCP 连接与迁移 HTTP/3 之间争论,目标是降低跨流丢包影响,你会怎样说明两种方案的边界?
参考回答

多开连接可把部分丢包影响隔离到不同 TCP 连接,但会增加建连与连接管理成本,也不能消除各连接内部的按序阻塞。HTTP/3 通过 QUIC 的独立流避免跨流传输层队头阻塞,但仍有丢包恢复、拥塞控制及部署兼容成本,需结合网络环境取舍。

# QUIC 协议

← HTTP2特性概览迁移到HTTP2 →

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • HTTP

    • 基础篇

      • HTTP的前世今生
      • HTTP是什么
      • HTTP世界全览
      • HTTP分层
      • 键入网址到回车发生什么
      • HTTP报文是什么样子的
      • 理解请求方法
      • URI
      • 响应状态码
      • HTTP有哪些特点
      • HTTP优缺点
      • HTTP的实体数据
      • HTTP传输大文件
      • HTTP的连接管理
      • HTTP的重定向
      • HTTP的Cookie机制
      • HTTP的缓存控制
      • HTTP的代理服务
      • HTTP的缓存代理
    • 高级篇

    • 扩展篇

  • 浏览器相关

  • 计算机基础