揭秘 HTTP/2 头部压缩技术
| 导读 | 咱们知道，HTTP/2 协议由两个 RFC 组成：一个是 RFC 7540，描述了 HTTP/2 协议自己；一个是 RFC 7541，描述了 HTTP/2 协议中使用的头部压缩技术。本文将经过实际案例带领你们详细地认识 HTTP/2 头部压缩这门技术。 |
为何要压缩html
在 HTTP/1 中，HTTP 请求和响应都是由「状态行、请求 / 响应头部、消息主体」三部分组成。通常而言，消息主体都会通过 gzip 压缩，或者自己传输的就是压缩事后的二进制文件（例如图片、音频），但状态行和头部却没有通过任何压缩，直接以纯文本传输。随着 Web 功能愈来愈复杂，每一个页面产生的请求数也愈来愈多，根据 HTTP Archive 的统计，当前平均每一个页面都会产生上百个请求。愈来愈多的请求致使消耗在头部的流量愈来愈多，尤为是每次都要传输 UserAgent、Cookie 这类不会频繁变更的内容，彻底是一种浪费。node
如下是我随手打开的一个页面的抓包结果。能够看到，传输头部的网络开销超过 100kb，比 HTML 还多：linux
下面是其中一个请求的明细。能够看到，为了得到 58 字节的数据，在头部传输上花费了好几倍的流量：android
HTTP/1 时代，为了减小头部消耗的流量，有不少优化方案能够尝试，例如合并请求、启用 Cookie-Free 域名等等，可是这些方案或多或少会引入一些新的问题，这里不展开讨论。git
压缩后的效果github
首先直接上图。下图选中的 Stream 是首次访问本站，浏览器发出的请求头：api
从图片中能够看到这个 HEADERS 流的长度是 206 个字节，而解码后的头部长度有 451 个字节。因而可知，压缩后的头部大小减小了一半多。浏览器
然而这就是所有吗？再上一张图。下图选中的 Stream 是点击本站连接后，浏览器发出的请求头：安全
能够看到这一次，HEADERS 流的长度只有 49 个字节，可是解码后的头部长度却有 470 个字节。这一次，压缩后的头部大小几乎只有原始大小的 1/10。性能优化
为何先后两次差距这么大呢？咱们把两次的头部信息展开，查看同一个字段两次传输所占用的字节数：
对比后能够发现，第二次的请求头部之因此很是小，是由于大部分键值对只占用了一个字节。尤为是 UserAgent、Cookie 这样的头部，首次请求中须要占用不少字节，后续请求中都只须要一个字节。
技术原理
下面这张截图，取自 Google 的性能专家 Ilya Grigorik 在 Velocity 2015 • SC 会议中分享的「HTTP/2 is here, let's optimize!」，很是直观地描述了 HTTP/2 中头部压缩的原理：
我再用通俗的语言解释下，头部压缩须要在支持 HTTP/2 的浏览器和服务端之间：维护一份相同的静态字典（Static Table），包含常见的头部名称，以及特别常见的头部名称与值的组合；
- 维护一份相同的静态字典（Static Table），包含常见的头部名称，以及特别常见的头部名称与值的组合
- 维护一份相同的动态字典（Dynamic Table），能够动态地添加内容
- 支持基于静态哈夫曼码表的哈夫曼编码（Huffman Coding）
静态字典的做用有两个：1）对于彻底匹配的头部键值对，例如 :method: GET，能够直接使用一个字符表示；2）对于头部名称能够匹配的键值对，例如 cookie: xxxxxxx，能够将名称使用一个字符表示。HTTP/2 中的静态字典以下
| Index | Header Name | Header Value |
|---|---|---|
| 1 | :authority | |
| 2 | :method | GET |
| 3 | :method | POST |
| 4 | :path | / |
| 5 | :path | /index.html |
| 6 | :scheme | http |
| 7 | :scheme | https |
| 8 | :status | 200 |
| ... | ... | ... |
| 32 | cookie | |
| ... | ... | ... |
| 60 | via | |
| 61 | www-authenticate |
同时，浏览器能够告知服务端，将 cookie: xxxxxxx 添加到动态字典中，这样后续整个键值对就可使用一个字符表示了。相似的，服务端也能够更新对方的动态字典。须要注意的是，动态字典上下文有关，须要为每一个 HTTP/2 链接维护不一样的字典,使用字典能够极大地提高压缩效果，其中静态字典在首次请求中就可使用。对于静态、动态字典中不存在的内容，还可使用哈夫曼编码来减少体积。HTTP/2 使用了一份静态哈夫曼码表（详见），也须要内置在客户端和服务端之中。
这里顺便说一下，HTTP/1 的状态行信息（Method、Path、Status 等），在 HTTP/2 中被拆成键值对放入头部（冒号开头的那些），一样能够享受到字典和哈夫曼压缩。另外，HTTP/2 中全部头部名称必须小写。
实现细节
了解了 HTTP/2 头部压缩的基本原理，最后咱们来看一下具体的实现细节。HTTP/2 的头部键值对有如下这些状况：
1）整个头部键值对都在字典中
0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 1 | Index (7+) | +---+---------------------------+
这是最简单的状况，使用一个字节就能够表示这个头部了，最左一位固定为 1，以后七位存放键值对在静态或动态字典中的索引。例以下图中，头部索引值为 2（0000010），在静态字典中查询可得 :method: GET。
2）头部名称在字典中，更新动态字典
0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 0 | 1 | Index (6+) | +---+---+-----------------------+ | H | Value Length (7+) | +---+---------------------------+ | Value String (Length octets) | +-------------------------------+
对于这种状况，首先须要使用一个字节表示头部名称：左两位固定为 01，以后六位存放头部名称在静态或动态字典中的索引。接下来的一个字节第一位 H 表示头部值是否使用了哈夫曼编码，剩余七位表示头部值的长度 L，后续 L 个字节就是头部值的具体内容了。例以下图中索引值为 32（100000），在静态字典中查询可得 cookie；头部值使用了哈夫曼编码（1），长度是 28（0011100）；接下来的 28 个字节是 cookie 的值，将其进行哈夫曼解码就能获得具体内容。
客户端或服务端看到这种格式的头部键值对，会将其添加到本身的动态字典中。后续传输这样的内容，就符合第 1 种状况了。
3）头部名称不在字典中，更新动态字典
0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 0 | 1 | 0 | +---+---+-----------------------+ | H | Name Length (7+) | +---+---------------------------+ | Name String (Length octets) | +---+---------------------------+ | H | Value Length (7+) | +---+---------------------------+ | Value String (Length octets) | +-------------------------------+
这种状况与第 2 种状况相似，只是因为头部名称不在字典中，因此第一个字节固定为 01000000；接着申明名称是否使用哈夫曼编码及长度，并放上名称的具体内容；再申明值是否使用哈夫曼编码及长度，最后放上值的具体内容。例以下图中名称的长度是 5（0000101），值的长度是 6（0000110）。对其具体内容进行哈夫曼解码后，可得 pragma: no-cache。
客户端或服务端看到这种格式的头部键值对，会将其添加到本身的动态字典中。后续传输这样的内容，就符合第 1 种状况了。
4）头部名称在字典中，不容许更新动态字典
0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 0 | 0 | 0 | 1 | Index (4+) | +---+---+-----------------------+ | H | Value Length (7+) | +---+---------------------------+ | Value String (Length octets) | +-------------------------------+
这种状况与第 2 种状况很是相似，惟一不一样之处是：第一个字节左四位固定为 0001，只剩下四位来存放索引了，以下图：
这里须要介绍另一个知识点：对整数的解码。上图中第一个字节为 00011111，并不表明头部名称的索引为 15（1111）。第一个字节去掉固定的 0001，只剩四位可用，将位数用 N 表示，它只能用来表示小于「2 ^ N - 1 = 15」的整数 I。对于 I，须要按照如下规则求值（RFC 7541 中的伪代码，via）：
if I < 2 ^ N - 1, return I # I 小于 2 ^ N - 1 时，直接返回
else
M = 0
repeat
B = next octet # 让 B 等于下一个八位
I = I + (B & 127) * 2 ^ M # I = I + (B 低七位 * 2 ^ M)
M = M + 7
while B & 128 == 128 # B 最高位 = 1 时继续，不然返回 I
return I
对于上图中的数据，按照这个规则算出索引值为 32（00011111 00010001，15 + 17），表明 cookie。须要注意的是，协议中全部写成（N+）的数字，例如 Index (4+)、Name Length (7+)，都须要按照这个规则来编码和解码。
这种格式的头部键值对，不容许被添加到动态字典中（但可使用哈夫曼编码）。对于一些很是敏感的头部，好比用来认证的 Cookie，这么作能够提升安全性。
5）头部名称不在字典中，不容许更新动态字典
0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 0 | 0 | 0 | 1 | 0 | +---+---+-----------------------+ | H | Name Length (7+) | +---+---------------------------+ | Name String (Length octets) | +---+---------------------------+ | H | Value Length (7+) | +---+---------------------------+ | Value String (Length octets) | +-------------------------------+
这种状况与第 3 种状况很是相似，惟一不一样之处是：第一个字节固定为 00010000。这种状况比较少见，没有截图，各位能够脑补。一样，这种格式的头部键值对，也不容许被添加到动态字典中，只能使用哈夫曼编码来减小体积。
实际上，协议中还规定了与 四、5 很是相似的另外两种格式：将 四、5 格式中的第一个字节第四位由 1 改成 0 便可。它表示「本次不更新动态词典」，而 四、5 表示「绝对不容许更新动态词典」。区别不是很大，这里略过。
明白了头部压缩的技术细节，理论上能够很轻松写出 HTTP/2 头部解码工具了。我比较懒，直接找来 node-http2 中的compressor.js 验证一下：
var Decompressor = require('./compressor').Decompressor;
var testLog = require('bunyan').createLogger({name: 'test'});
var decompressor = new Decompressor(testLog, 'REQUEST');
var buffer = new Buffer('820481634188353daded6ae43d3f877abdd07f66a281b0dae053fad0321aa49d13fda992a49685340c8a6adca7e28102e10fda9677b8d05707f6a62293a9d810020004015309ac2ca7f2c3415c1f53b0497ca589d34d1f43aeba0c41a4c7a98f33a69a3fdf9a68fa1d75d0620d263d4c79a68fbed00177febe58f9fbed00177b518b2d4b70ddf45abefb4005db901f1184ef034eff609cb60725034f48e1561c8469669f081678ae3eb3afba465f7cb234db9f4085aec1cd48ff86a8eb10649cbf', 'hex');
console.log(decompressor.decompress(buffer));
decompressor._table.forEach(function(row, index) {
console.log(index + 1, row[0], row[1]);
});
头部原始数据来自于本文第三张截图，运行结果以下（静态字典只截取了一部分）：
{ ':method': 'GET',
':path': '/',
':authority': 'imququ.com',
':scheme': 'https',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:41.0) Gecko/20100101 Firefox/41.0',
accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
'accept-language': 'en-US,en;q=0.5',
'accept-encoding': 'gzip, deflate',
cookie: 'v=47; u=6f048d6e-adc4-4910-8e69-797c399ed456',
pragma: 'no-cache' }
1 ':authority' ''
2 ':method' 'GET'
3 ':method' 'POST'
4 ':path' '/'
5 ':path' '/index.html'
6 ':scheme' 'http'
7 ':scheme' 'https'
8 ':status' '200'
... ...
32 'cookie' ''
... ...
60 'via' ''
61 'www-authenticate' ''
62 'pragma' 'no-cache'
63 'cookie' 'u=6f048d6e-adc4-4910-8e69-797c399ed456'
64 'accept-language' 'en-US,en;q=0.5'
65 'accept' 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8'
66 'user-agent' 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:41.0) Gecko/20100101 Firefox/41.0'
67 ':authority' 'imququ.com'
能够看到，这段从 Wireshark 拷出来的头部数据能够正常解码，动态字典也获得了更新（62 - 67）。
总结
在进行 HTTP/2 网站性能优化时很重要一点是「使用尽量少的链接数」，本文提到的头部压缩是其中一个很重要的缘由：同一个链接上产生的请求和响应越多，动态字典积累得越全，头部压缩效果也就越好。因此，针对 HTTP/2 网站，最佳实践是不要合并资源，不要散列域名。
默认状况下，浏览器会针对这些状况使用同一个链接：
- 同一域名下的资源；
- 不一样域名下的资源，可是知足两个条件：1）解析到同一个 IP；2）使用同一个证书；
上面第一点容易理解，第二点则很容易被忽略。实际上 Google 已经这么作了，Google 一系列网站都共用了同一个证书，能够这样验证：
$ openssl s_client -connect google.com:443 |openssl x509 -noout -text | grep DNS
depth=2 C = US, O = GeoTrust Inc., CN = GeoTrust Global CA
verify error:num=20:unable to get local issuer certificate
verify return:0
DNS:*.google.com, DNS:*.android.com, DNS:*.appengine.google.com, DNS:*.cloud.google.com, DNS:*.google-analytics.com, DNS:*.google.ca, DNS:*.google.cl, DNS:*.google.co.in, DNS:*.google.co.jp, DNS:*.google.co.uk, DNS:*.google.com.ar, DNS:*.google.com.au, DNS:*.google.com.br, DNS:*.google.com.co, DNS:*.google.com.mx, DNS:*.google.com.tr, DNS:*.google.com.vn, DNS:*.google.de, DNS:*.google.es, DNS:*.google.fr, DNS:*.google.hu, DNS:*.google.it, DNS:*.google.nl, DNS:*.google.pl, DNS:*.google.pt, DNS:*.googleadapis.com, DNS:*.googleapis.cn, DNS:*.googlecommerce.com, DNS:*.googlevideo.com, DNS:*.gstatic.cn, DNS:*.gstatic.com, DNS:*.gvt1.com, DNS:*.gvt2.com, DNS:*.metric.gstatic.com, DNS:*.urchin.com, DNS:*.url.google.com, DNS:*.youtube-nocookie.com, DNS:*.youtube.com, DNS:*.youtubeeducation.com, DNS:*.ytimg.com, DNS:android.com, DNS:g.co, DNS:goo.gl, DNS:google-analytics.com, DNS:google.com, DNS:googlecommerce.com, DNS:urchin.com, DNS:youtu.be, DNS:youtube.com, DNS:youtubeeducation.com
使用多域名加上相同的 IP 和证书部署 Web 服务有特殊的意义：让支持 HTTP/2 的终端只创建一个链接，用上 HTTP/2 协议带来的各类好处；而只支持 HTTP/1.1 的终端则会创建多个链接，达到同时更多并发请求的目的。这在 HTTP/2 彻底普及前也是一个不错的选择。
免费提供最新Linux技术教程书籍，为开源技术爱好者努力作得更多更好：http://www.linuxprobe.com/