HTTP2.0之Header 入门版、面试版 一看就懂

在 HTTP/1.x 中,每个请求都会携带完整的 Header 字段(如 User-Agent、Cookie 等),即使多个请求的 Header 变化不大,也需要重复发送,导致大量带宽浪费。

HTTP/2 引入了 HPACK头部压缩算法,通过 表格存储差量更新,减少 Header 体积,提高传输效率。

关键点

  • 通讯双方(客户端 & 服务端)各自维护一张动态表,缓存Header信息
  • 后续请求不再传递完整头部,只传递索引或增量变化
  • 使用 Huffman编码压缩Header 字段值,进一步减少大小
  1. 具体流程
  • 首次请求:完整发送头部字段

    • 客户端 -> 服务端:发送完整的 Header并存入 动态表
    • 服务器收到后,同样存入 动态表
  • 后续请求:只发送变化部分(索引+差量更新)

    • 如果 Header 完全相同 ,客户端 只发送索引(减少重复数据)
    • 如果Header 部分字段变化 ,客户端 仅发送新增或修改的部分
    • 服务器收到后,更新自己的动态表,按需修改Header

动态表 初始为空:

索引 Header Name Header Value
(空) (空) (空)

说了上面这些,我们有了初步了解,接下来通过例子来加深印象

  • 第 1 次请求(完整 Header)

请求:

makefile 复制代码
GET /index.html HTTP/2
Host: example.com
User-Agent: Chrome/100
Accept-Encoding: gzip
Cookie: session=abc123

由于动态表为空 ,客户端完整发送 Header

服务器接收 Header 后,会 依次存入动态表(新项在表头)

动态表(服务器端更新):

索引 Header Name Header Value
1 Cookie session=abc123
2 Accept-Encoding gzip
3 User-Agent Chrome/100
4 Host example.com
  • 第 2 次请求(部分 Header 相同,内容变化)

请求:

makefile 复制代码
GET /about.html HTTP/2
Host: example.com
User-Agent: Chrome/100
Accept-Encoding: gzip
Cookie: session=xyz456

变化点:

  • Host、User-Agent、Accept-Encoding 未变(可以直接用索引)。
  • Cookie 变了 (session=xyz456),需要发送新的值,并更新动态表。
    客户端优化发送(使用索引 + 变更值):
ini 复制代码
索引 4  # Host: example.com
索引 3  # User-Agent: Chrome/100
索引 2  # Accept-Encoding: gzip
(新值) Cookie: session=xyz456

动态表(服务器端更新):

索引 Header Name Header Value
1 Cookie session=xyz456 (替换旧值)
2 Accept-Encoding gzip
3 User-Agent Chrome/100
4 Host example.com

客户端只发送 1 个新字段,其余字段直接用索引代替,减少了数据传输量。

  • 第 3 次请求(部分 Header 继续变化,新增字段)

请求:

yaml 复制代码
GET /profile.html HTTP/2
Host: example.com
User-Agent: Chrome/100
Accept-Encoding: gzip
Cookie: session=xyz456
Authorization: Bearer 12345  # 新增字段

变化点:

  • Cookie 未变(使用索引)。
  • Authorization 是新字段 (需要传输并更新动态表)。
    客户端优化发送:
yaml 复制代码
索引 4  # Host: example.com
索引 3  # User-Agent: Chrome/100
索引 2  # Accept-Encoding: gzip
索引 1  # Cookie: session=xyz456
(新值) Authorization: Bearer 12345

动态表(服务器端更新):

索引 Header Name Header Value
1 Authorization Bearer 12345 (新增)
2 Cookie session=xyz456
3 Accept-Encoding gzip
4 User-Agent Chrome/100
5 Host example.com

好了,通过上面的例子,你多多少少应该懂了,接下来总结一下

  • HTTP/2通过 HPACK 机制压缩Header,缓存已发送字段,并在后续请求中只传递差量数据
  • 通讯双方(客户端&服务端)各自维护一个动态表,避免重复发送相同头部字段,提升传输效率
  • 头部字段采用 Huffman编码进一步压缩,减少宽带占用

最后如果觉得文章对你有帮助,记得给个赞,感谢~

相关推荐
CharlesYu0110 小时前
前端性能优化的第一性原理,是不断缩短“用户发起意图 → 获得可用结果”之间的时间
前端
平头哥技术团队10 小时前
Day 21 _ 页内锚点_给每段起个 id,目录写 href=_#id_,点一下页面就滚到那一段
前端·html·html5
子兮曰11 小时前
Bun v1.4.1 深度解析:从 Zig 到 Rust,一场 11 天、64 个 AI 代理的语言迁徙
前端·后端·bun
人民广场吃泡面11 小时前
什么是AI Agent?它又能给前端带来哪些效率提升?
前端·人工智能
中科三方12 小时前
两家域名注册商资质被ICANN终止:企业域名资产安全再受关注
前端·网络·安全·域名
bug总结12 小时前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
华无丽言12 小时前
如何在宜搭中实现获取子表中的字段值赋值到父表中?
前端·javascript·低代码
IT_陈寒13 小时前
Vue的computed属性竟然坑了我一把
前端·人工智能·后端
威斯软科的老司机13 小时前
通俗讲解 CNN 图像识别、向量 Embedding、Softmax 概率计算这三块的简化原理
前端·人工智能·ui·数字孪生
泯泷14 小时前
手搓JSVM第 12 篇:完整最小 JSVM 实现与源码设计复盘
前端·javascript·前端框架