>

头部压缩技术介绍

- 编辑:至尊游戏网站 -

头部压缩技术介绍

HTTP/2 底部压缩本事介绍

2016/04/13 · 基础技术 · HTTP/2

本文小编: 伯乐在线 - JerryQu 。未经笔者许可,防止转载!
接待插手伯乐在线 专辑小编。

我们通晓,HTTP/2 合同由八个 LacrosseFC 组成:两个是 RFC 7540,描述了 HTTP/2 合同本身;一个是 RFC 7541,描述了 HTTP/2 合同中选用的尾部压缩本领。本文将通超过实际际案例引导大家详细地认知 HTTP/2 尾部压缩那门手艺。

HTTP/2 尾部压缩本领介绍

2015/11/03 · HTML5 · HTTP/2

初藳出处: imququ(@屈光宇)   

大家领略,HTTP/2 公约由八个 奥迪Q5FC 组成:四个是 RFC 7540,描述了 HTTP/2 左券本人;八个是 RFC 7541,描述了 HTTP/2 公约中选取的尾部压缩技能。本文将通超过实际际案例指引我们详细地认知 HTTP/2 尾部压缩那门本领。

为什么要减弱

在 HTTP/1 中,HTTP 央求和响应都以由「状态行、须求 / 响应尾部、音讯主体」三有的组成。平常来说,音信主体都会通过 gzip 压缩,大概自个儿传输的就是减掉过后的二进制文件(比方图片、音频),但景况行和底部却未曾经过任何压缩,直接以纯文本传输。

趁着 Web 功用越来越复杂,各类页面发生的哀告数也越增添,依据 HTTP Archive 的总括,当前平均各样页面都会发出过两个央浼。越多的呼吁导致消耗在头顶的流量越多,特别是每趟都要传输 UserAgent、Cookie 那类不会一再退换的内容,完全部都以一种浪费。

以下是本身顺手张开的贰个页面包车型客车抓包结果。可以看来,传输底部的网络支付超过100kb,比 HTML 还多:

图片 1

下边是此中一个必要的明细。能够看出,为了赢得 58 字节的数额,在头顶传输上海消防费了几许倍的流量:

图片 2

HTTP/1 时期,为了削减尾部消耗的流量,有为数不菲优化方案得以品味,举个例子合併央求、启用 Cookie-Free 域名等等,不过那些方案或多或少会引进一些新的标题,这里不张开切磋。

怎么要减弱

在 HTTP/1 中,HTTP 必要和响应都以由「状态行、诉求 / 响应底部、音讯主体」三有的组成。日常来说,音讯主体都会透过 gzip 压缩,或许作者传输的就是减掉过后的二进制文件(举个例子图片、音频),但气象行和底部却未曾经过任何压缩,间接以纯文本传输。

趁着 Web 成效越来越复杂,各类页面发生的央求数也更是多,遵照 HTTP Archive 的总结,当前平均每一个页面都会发出过四个须求。更多的呼吁导致消耗在头顶的流量越来越多,极其是每趟都要传输 UserAgent、Cookie 这类不会一再员和转业移的原委,完全是一种浪费。

以下是本人随手张开的八个页面的抓包结果。可以看来,传输底部的网络开采超越100kb,比 HTML 还多:

图片 3

上边是里面二个伸手的密切。能够见到,为了赢得 58 字节的多少,在头顶传输上开支了一点倍的流量:

图片 4

HTTP/1 时期,为了收缩头部消耗的流量,有成都百货上千优化方案得以尝尝,举个例子合併诉求、启用 Cookie-Free 域名等等,可是那些方案或多或少会引进一些新的主题材料,这里不张开钻探。

缩减后的效果

接下去自个儿将选取访谈本博客的抓包记录以来明 HTTP/2 底部压缩带来的转移。如何利用 Wireshark 对 HTTPS 网址进行抓包并解密,请看本人的那篇作品。

先是直接上海体育场合。下图选中的 Stream 是第三次访问本站,浏览器发出的呼吁头:

图片 5

从图纸中得以看看这几个 HEADERAV4S 流的长度是 206 个字节,而解码后的头顶长度有 451 个字节。由此可见,压缩后的尾部大小减少了八分之四多。

唯独那正是漫天吗?再上一张图。下图选中的 Stream 是点击本站链接后,浏览器发出的乞请头:

图片 6

能够看来那二次,HEADE奥迪Q3S 流的尺寸唯有 49 个字节,不过解码后的头顶长度却有 470 个字节。那三回,压缩后的底部大小大概只有原本大小的 1/10。

为什么前后三次差别这么大啊?大家把四次的底部消息举行,查看同贰个字段四遍传输所攻下的字节数:

图片 7

图片 8

相比后能够窥见,第贰次的恳求底部之所以相当小,是因为大多数键值对只占用了贰个字节。越发是 UserAgent、Cookie 那样的头顶,第三遍呼吁中需求占用很多字节,后续诉求中都只须要一个字节。

调整和降低后的意义

接下去本人将利用访谈本博客的抓包记录以来明 HTTP/2 尾部压缩带来的转移。如何行使 Wireshark 对 HTTPS 网站实行抓包并解密,请看笔者的那篇小说。本文使用的抓包文件,可以点这里下载。

首先间接上航海用体育场地。下图选中的 Stream 是第一回访谈本站,浏览器发出的伸手头:

图片 9

从图纸中得以看看那一个 HEADE陆风X8S 流的长短是 206 个字节,而解码后的头顶长度有 451 个字节。同理可得,压缩后的底部大小收缩了百分之五十多。

唯独那就是漫天吗?再上一张图。下图选中的 Stream 是点击本站链接后,浏览器发出的乞请头:

图片 10

能够看来那叁遍,HEADE安德拉S 流的长短唯有 49 个字节,不过解码后的底院长度却有 470 个字节。那一遍,压缩后的底部大小差不离独有原本大小的 1/10。

怎么前后五回差别这么大啊?大家把三回的头顶消息进行,查看同三个字段一回传输所占有的字节数:

图片 11

图片 12

相比较之下后方可开采,第二遍的伏乞尾部之所以比十分的小,是因为超越四分之二键值对只占用了一个字节。尤其是 UserAgent、Cookie 那样的头顶,第二回呼吁中要求占用非常多字节,后续央求中都只必要贰个字节。

技艺原理

上面那张截图,取自 谷歌 的特性专家 Ilya Grigorik 在 Velocity 二〇一四 • SC 会议中享用的「HTTP/2 is here, let’s optimize!」,特别直观地描述了 HTTP/2 中底部压缩的原理:

图片 13

自家再用深入浅出的言语表明下,尾部压缩供给在援救 HTTP/2 的浏览器和服务端之间:

  • 爱护一份一样的静态字典(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中具备底部名称必得小写。

本领原理

上边那张截图,取自 谷歌 的属性行家 Ilya Grigorik 在 Velocity 二〇一五 • SC 会议中分享的「HTTP/2 is here, let’s optimize!」,特别直观地描述了 HTTP/2 中底部压缩的规律:

图片 14

笔者再用浅显的言语疏解下,底部压缩要求在协助 HTTP/2 的浏览器和服务端之间:

  • 护卫一份同样的静态字典(Static Table),包括常见的尾部名称,乃至特地常见的头顶名称与值的组合;
  • 护卫一份一样的动态字典(Dynamic Table),能够动态的增进内容;
  • 支撑基于静态哈夫曼码表的哈夫曼编码(Huffman Coding);

静态字典的成效有七个:1)对于截然合营的底部键值对,举个例子 : method :GET,能够间接使用多少个字符表示;2)对于底部名称能够合作的键值对,比方 cookie :xxxxxxx,能够将名称使用多个字符表示。HTTP/第22中学的静态字典如下(以下只截取了一部分,完整表格在这里):

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/第22中学存有尾部名称必得小写。

兑现细节

摸底了 HTTP/2 底部压缩的基本原理,最终大家来看一下实际的贯彻细节。HTTP/2 的尾部键值对有以下这么些境况:

1)整个尾部键值对都在字典中

JavaScript

0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 1 | Index (7+) | +---+---------------------------+

1
2
3
4
5
  0   1   2   3   4   5   6   7
+---+---+---+---+---+---+---+---+
| 1 |        Index (7+)         |
+---+---------------------------+
 

那是最简易的情形,使用贰个字节就足以代表那几个底部了,最左一位牢固为 1,之后七个人存放键值对在静态或动态字典中的索引。比方下图中,尾部索引值为 2(0000010),在静态字典中查询可得 :method: GET

图片 15

2)底部名称在字典中,更新动态字典

JavaScript

0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 0 | 1 | Index (6+) | +---+---+-----------------------+ | H | Value Length (7+) | +---+---------------------------+ | Value String (Length octets) | +-------------------------------+

1
2
3
4
5
6
7
8
9
  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(一千00),在静态字典中询问可得 cookie;尾部值使用了哈夫曼编码(1),长度是 28(0011100);接下去的 三十个字节是 cookie 的值,将其开展哈夫曼解码就能够收获具体内容。

图片 16

客商端或服务端看见这种格式的底部键值对,会将其增多到自个儿的动态字典中。后续传输那样的剧情,就切合第 1 种境况了。

3)底部名称不在字典中,更新动态字典

JavaScript

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) | +-------------------------------+

1
2
3
4
5
6
7
8
9
10
11
12
13
  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 种情形好像,只是出于底部名称不在字典中,所以首先个字节固定为 0一千000;接着注明名称是或不是利用哈夫曼编码及长度,并放上名称的具体内容;再注脚值是或不是选拔哈夫曼编码及长度,最终放上值的具体内容。比方下图中名称的尺寸是 5(0000101),值的长短是 6(0000110)。对其具体内容进行哈夫曼解码后,可得 pragma: no-cache

图片 17

客商端或服务端见到这种格式的底部键值对,会将其加多到自个儿的动态字典中。后续传输那样的剧情,就切合第 1 种情况了。

4)底部名称在字典中,不允许更新动态字典

JavaScript

0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 0 | 0 | 0 | 1 | Index (4+) | +---+---+-----------------------+ | H | Value Length (7+) | +---+---------------------------+ | Value String (Length octets) | +-------------------------------+

1
2
3
4
5
6
7
8
9
  0   1   2   3   4   5   6   7
+---+---+---+---+---+---+---+---+
| 0 | 0 | 0 | 1 |  Index (4+)   |
+---+---+-----------------------+
| H |     Value Length (7+)     |
+---+---------------------------+
| Value String (Length octets)  |
+-------------------------------+
 

这种场馆与第 2 种情景特别类似,独一分化之处是:第五个字节左二人稳固为 0001,只剩余三人来贮存索引了,如下图:

图片 18

此处必要介绍别的四个知识点:对整数的解码。上海教室中首先个字节为 00011111,并不表示底部名称的目录为 15(1111)。第一个字节去掉固定的 0001,只剩二个人可用,将位数用 N 表示,它只好用来表示小于「2 ^ N – 1 = 15」的寸头 I。对于 I,需求遵守以下准则求值(奥迪Q7FC 7541中的伪代码,via):

JavaScript

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

1
2
3
4
5
6
7
8
9
10
if I &lt; 2 ^ N - 1, return I         # I 小于 2 ^ N - 1 时,直接返回
else
    M = 0
    repeat
        B = next octet             # 让 B 等于下一个八位
        I = I + (B &amp; 127) * 2 ^ M  # I = I + (B 低七位 * 2 ^ M)
        M = M + 7
    while B &amp; 128 == 128           # B 最高位 = 1 时继续,否则返回 I
    return I
 

对于上海体育场合中的数据,根据那个法规算出索引值为 32(00011111 000一千1,15 + 17),代表 cookie。供给注意的是,公约中存有写成(N+)的数字,举例Index (4+)、Name Length (7+),都急需遵照这些法规来编码和平消除码。

这种格式的尾部键值对,不允许被增多到动态字典中(但能够行使哈夫曼编码)。对于某些不胜灵活的头顶,举个例子用来验证的 Cookie,这么做能够增进安全性。

5)尾部名称不在字典中,不容许更新动态字典

JavaScript

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) | +-------------------------------+

1
2
3
4
5
6
7
8
9
10
11
12
13
  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。这种景况相当少见,未有截图,各位能够脑补。同样,这种格式的底部键值对,也不容许被加多到动态字典中,只可以采纳哈夫曼编码来压缩体量。

实际,左券中还鲜明了与 4、5 特别左近的别的三种格式:将 4、5 格式中的第二个字节第几人由 1 改为 0 就可以。它代表「本次不更新动态词典」,而 4、5 代表「相对不容许更新动态词典」。分歧不是十分大,这里略过。

明白了头部压缩的能力细节,理论上能够十分轻易写出 HTTP/2 尾部解码工具了。笔者相比懒,间接找来 node-http2 中的 compressor.js 验证一下:

JavaScript

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]); });

1
2
3
4
5
6
7
8
9
10
11
12
13
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]);
});
 

底部原始数据来源于于本文第三张截图,运营结果如下(静态字典只截取了一片段):

JavaScript

{ ':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'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{ ':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)整个尾部键值对都在字典中

JavaScript

0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 1 | Index (7+) | +---+---------------------------+

1
2
3
4
5
  0   1   2   3   4   5   6   7
+---+---+---+---+---+---+---+---+
| 1 |        Index (7+)         |
+---+---------------------------+
 

那是最简便的状态,使用一个字节就可以象征这么些底部了,最左一个人牢固为 1,之后捌位存放键值对在静态或动态字典中的索引。比如下图中,尾部索引值为 2(0000010),在静态字典中查询可得 : method :GET

图片 19

2)尾部名称在字典中,更新动态字典

JavaScript

0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 0 | 1 | Index (6+) | +---+---+-----------------------+ | H | Value Length (7+) | +---+---------------------------+ | Value String (Length octets) | +-------------------------------+

1
2
3
4
5
6
7
8
9
  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(一千00),在静态字典中查询可得  cookie ;底部值使用了哈夫曼编码(1),长度是 28(0011100);接下去的 二十六个字节是 cookie 的值,将其张开哈夫曼解码就能够获得具体内容。

图片 20

顾客端或服务端看见这种格式的头顶键值对,会将其增添到自身的动态字典中。后续传输那样的剧情,就相符第 1 种境况了。

3)底部名称不在字典中,更新动态字典

JavaScript

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) | +-------------------------------+

1
2
3
4
5
6
7
8
9
10
11
12
13
  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 。

图片 21

顾客端或服务端看见这种格式的头顶键值对,会将其增添到自身的动态字典中。后续传输那样的内容,就相符第 1 种状态了。

4)底部名称在字典中,不容许更新动态字典

JavaScript

0 1 2 3 4 5 6 7 +---+---+---+---+---+---+---+---+ | 0 | 0 | 0 | 1 | Index (4+) | +---+---+-----------------------+ | H | Value Length (7+) | +---+---------------------------+ | Value String (Length octets) | +-------------------------------+

1
2
3
4
5
6
7
8
9
  0   1   2   3   4   5   6   7
+---+---+---+---+---+---+---+---+
| 0 | 0 | 0 | 1 |  Index (4+)   |
+---+---+-----------------------+
| H |     Value Length (7+)     |
+---+---------------------------+
| Value String (Length octets)  |
+-------------------------------+
 

这种情形与第 2 种情况相当周边,独一不相同之处是:第多少个字节左三位稳固为 0001,只剩下四个人来寄放索引了,如下图:

图片 22

这里必要介绍另外三个知识点:对整数的解码。上海教室中首先个字节为 00011111,并不意味着底部名称的目录为 15(1111)。第三个字节去掉固定的 0001,只剩肆人可用,将位数用 N 表示,它不得不用来表示小于「2 ^ N – 1 = 15」的子弹头 I。对于 I,须要服从以下法则求值(传祺FC 754第11中学的伪代码,via):

Python

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

1
2
3
4
5
6
7
8
9
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)底部名称不在字典中,不允许更新动态字典

JavaScript

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) | +-------------------------------+

1
2
3
4
5
6
7
8
9
10
11
12
13
  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 种情况非凡周边,独一不一致之处是:第多少个字节固定为 000一千0。这种情况很少见,未有截图,各位能够脑补。一样,这种格式的头顶键值对,也不允许被增多到动态字典中,只好使用哈夫曼编码来压缩体积。

实则,左券中还规定了与 4、5 极其周边的此外两种格式:将 4、5 格式中的第3个字节第几人由 1 改为 0 即可。它象征「本次不创新动态词典」,而 4、5 表示「绝对不允许更新动态词典」。分裂不是非常的大,这里略过。

驾驭了尾部压缩的技艺细节,理论上得以很自在写出 HTTP/2 尾部解码工具了。笔者相比较懒,直接找来 node-http2中的 compressor.js 验证一下:

JavaScript

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]); });

1
2
3
4
5
6
7
8
9
10
11
12
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'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{ ':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 一多种网址都共用了同一个证件,能够如此表达:

JavaScript

$ 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

1
2
3
4
5
6
7
$ 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 完全遍布前也是三个科学的拈轻怕重。

本文就写到这里,希望能给对 HTTP/2 感兴趣的同学带来扶持,也应接大家继续关切本博客的「HTTP/2 专题」。

打赏扶持自身写出越来越多好文章,感谢!

打赏小编

总结

在扩充 HTTP/2 网址质量优化时很主要一点是「使用尽大概少的连接数」,本文提到的底部压缩是内部三个很要紧的因由:同多少个接连上发出的央求和响应越来越多,动态字典积存得越全,底部压缩效果也就越好。所以,针对 HTTP/2 网址,最棒施行是并不是合併财富,不要散列域名。

暗中认可意况下,浏览器会针对那几个情状采纳同三个连接:

  • 同一域名下的能源;
  • 分化域名下的能源,可是满意多个标准:1)深入分析到同三个IP;2)使用同一个证书;

地点第一点轻巧明白,第二点则很轻松被忽视。实际上 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

1
2
3
4
5
6
$ 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 完全普遍前也是贰个不错的选料。

1 赞 收藏 评论

图片 23

打赏帮衬自身写出越多好小说,多谢!

任选一种支付格局

图片 24 图片 25

1 赞 3 收藏 评论

有关作者:JerryQu

图片 26

静心 Web 开拓,关心 Web 质量优化与海东。 个人主页 · 笔者的稿子 · 2 ·   

图片 27

本文由IT-综合发布,转载请注明来源:头部压缩技术介绍