😎 HTTP/2 中的 HPACK 压缩原理全揭秘

LeonGao
82 阅读4分钟

🧩 I. 背景：HTTP/1.x 的“话痨”时代

在 HTTP/1.1 年代，每次发起请求都会带上一堆重复的 header：

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Chrome/123
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN
...

如果你刷网页刷得快点，这些 header 会像复读机一样，不厌其烦地重复发送千遍。

🌋 问题来了：

  • 每个请求重复那堆 header；
  • 网络里全是相同的字符串片段；
  • TCP 发包要带着它们一去不返地浪费流量。

这就像你和朋友聊天，每发一句话都要重复说：

“我叫小明，我来自互联网，我接下来说的是实话。” 😅

HTTP/2 说：你够了！我要打包压缩。

于是——HPACK 出场了。

⚙️ II. HPACK 的基本理念：让冗余消失

想象你有一个“记忆力超强”的邮差 📬。
他第一次听你说话会认真把信息记在本子上，
以后你只要说：“第2条、第5条”，他立刻明白。

HTTP/2 的头部压缩正是这么干的。
它用两种策略实现了“既聪明又省心”的压缩方式：

  1. 🗂️ 静态表 (Static Table)：
    内建了一份常用头部字段的对照表，像一本“常用词典”。
    例如：

    1: :authority
2: :method GET
3: :method POST
...

    所以若你请求是 “GET”，压缩后可以只发个索引号 “2”。

  2. 🧠 动态表 (Dynamic Table)：
    当你发新的 header 时，编码器会把它存在“记忆本”中。
    下次若再出现相同的字段或值，就用索引代替！
    这就像你跟邮差说：“以后我说‘奶茶’，你就知道是‘无糖+去冰+波霸’。”

🌀 III. 编码机制：HPACK 的三板斧

HPACK 的压缩过程就像一个三步舞 💃：

💥 1. 字典索引编码（Indexed Header Field Representation）

如果 header 已经存在（静态或动态表中），
HPACK 不传字符串，只传一个数字编号。

举个例子：

// Header 字段
:method: GET

在 HPACK 下会被编码成：

10000010  // 二进制表示索引号=2，对应 :method GET

那种节省字节的爽感，简直能让 TCP 也笑出声 🥳。

🧩 2. 字符串增量编码（Literal Header Field with Incremental Indexing）

如果是新字段但想让解码端“记住”它，
HPACK 会把新的 header 追加进动态表。

// JS伪代码
addHeaderToDynamicTable(":path", "/home")

等下次再发送相同 /home 时，就能直接用索引，而不必重复字符啦～

🔒 3. 不索引但仍传（Literal Header Field without Indexing）

有些字段，例如带认证信息的 header：

Authorization: Bearer XXXXX

挺敏感的🤐，不能让别人“记住”。
所以 HPACK 允许你传输但不加进表。
就像你告诉邮差密码，但他只能听一次，不许写下来。

🧮 IV. 再深一点：霍夫曼编码的魔法 🌈

除了索引，HPACK 还玩了一个黑科技：
霍夫曼编码 (Huffman Coding) 。

精神内核：让出现频率高的字符占更短的比特位。

也就是说：

  • “a”和“e”这样的高频字符 → 用更短的二进制；
  • 冷门字符（如“~”）→ 用更长的编码表示。

举个通俗例子 ⛩️：

字符传统表示HPACK 霍夫曼编码（示意）
a01100001101
e01100101110
~0111111011110111

于是，header 里的字符串部分变成一串又短又精妙的比特流！
你猜怎么着？HTTP/2 的报文体重几乎减了一半 🪶。

🔍 V. 解码过程：服务端的“追忆似水年华”

当服务端收到报文时，它就像一个逻辑学家 🧐：

  1. 读索引 → 查表还原；
  2. 新 header → 写入动态表；
  3. 霍夫曼比特串 → 还原成原始字符串。

动态表会随着时间滑动维护 —— 当容量溢出时，最老的头部会被淘汰（FIFO）。
这仿佛一个缓存管理器的梦幻翻版✨。

🧪 VI. 实战示例：JS 模拟编码/解码

让我们用几行 JavaScript 来感受一下压缩魔法：

// 🪄 模拟静态表的简化实现
const staticTable = {
  2: [":method", "GET"],
  4: [":path", "/index.html"]
};

// 模拟编码过程
function encodeHeader(header) {
  const entries = Object.entries(staticTable);
  for (const [idx, [name, value]] of entries) {
    if (header.name === name && header.value === value) {
      return { indexed: true, index: idx };
    }
  }
  return { indexed: false, header };
}

// 解码函数
function decode(encoded) {
  if (encoded.indexed) {
    return staticTable[encoded.index];
  }
  return [encoded.header.name, encoded.header.value];
}

// 示例
const encoded = encodeHeader({ name: ":method", value: "GET" });
console.log("Encoded:", encoded);
console.log("Decoded:", decode(encoded));

输出：

Encoded: { indexed: true, index: '2' }
Decoded: [ ':method', 'GET' ]

🎉 看！压缩与解压一气呵成，优雅得像吟诗。

🧭 VII. 小结：HPACK 是怎样的优雅工程

特性说明意象比喻
静态表固定词典出厂自带知识库 📚
动态表运行时缓存记忆训练师 🧠
霍夫曼编码高频压缩算法语言的“断句诗” 🪶
无状态传输每次 HTTP/2 流独立多线程骑士队 ⚔️

HPACK 看似“压缩工具”，实则是一次对 网络冗余性与传输效率的哲学反思。
在信息过载的世界，它用有限的比特，说尽无限的内容。

🐉 结语

HTTP/2 用 HPACK 告诉我们：

“压缩不是吝啬，而是智慧。”
就像诗人省略了标点，却说尽宇宙的秩序。

愿你理解 HPACK 后，看到的不只是协议，更是计算机科学的诗意哲学。
🌌

🎯 推荐阅读：

  • RFC 7541: HPACK: Header Compression for HTTP/2
  • RFC 9113: HTTP/2
  • Wireshark 分析 HTTP/2 的 HEADERS 帧，看看那神奇的比特流 💫
avatar
文章
阅读
粉丝