头部压缩技术介绍

头部压缩技术介绍

HTTP/2 底部压缩本事介绍

2016/04/13 · 底子才干 ·
HTTP/2

正文笔者: 伯乐在线 –
JerryQu
。未经作者许可,禁止转发!
接待参加伯乐在线 专栏小编。

笔者们知晓,HTTP/2 公约由七个 KugaFC 组成:二个是 RFC
7540,描述了 HTTP/2
左券本人;一个是 RFC
7541,描述了 HTTP/2
协议中应用的底部压缩技巧。本文将透超过实际际案例指导我们详细地认知 HTTP/2
尾部压缩那门能力。

HTTP/2 底部压缩手艺介绍

2015/11/03 · HTML5 ·
HTTP/2

原稿出处:
imququ(@屈光宇)   

咱俩精通,HTTP/2 左券由多少个 LANDFC 组成:叁个是 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

从图片中能够看看那几个 HEADE大切诺基S 流的长度是 206 个字节,而解码后的头顶长度有
451 个字节。一言以蔽之,压缩后的底部大小减少了大意上多。

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

图片 6

能够看看那叁遍,HEADE路虎极光S 流的尺寸独有 49 个字节,不过解码后的尾秘书长度却有
470 个字节。那贰回,压缩后的尾部大小大概唯有原本大小的 1/10。

为何前后三回差别这么大呢?大家把五遍的底部音讯实行,查看同多个字段三次传输所占领的字节数:

图片 7

图片 8

对照后得以发掘,第二遍的伸手底部之所以相当的小,是因为大部分键值对仅占用了二个字节。特别是
UserAgent、Cookie
那样的头顶,第贰回号令中需求占用相当多字节,后续诉求中都只必要一个字节。

减去后的功用

接下去自个儿将动用访谈本博客的抓包记录以来明 HTTP/2
尾部压缩带给的转移。怎么着行使 Wireshark 对 HTTPS
网站实行抓包并解密,请看作者的那篇小说。本文使用的抓包文件,能够点这边下载。

先是直接上海教室。下图选中的 Stream 是第叁次访问本站,浏览器发出的须求头:

图片 9

从图片中得以见到那么些 HEADEQX56S 流的长度是 206 个字节,而解码后的头顶长度有
451 个字节。总的来说,压缩后的底部大小收缩了四分之二多。

可是那便是总体吗?再上一张图。下图选中的 Stream
是点击本站链接后,浏览器发出的伸手头:

图片 10

能够看出那一回,HEADEPAJEROS 流的长短唯有 49 个字节,但是解码后的头顶长度却有
470 个字节。那一回,压缩后的尾部大小差相当少独有原本大小的 1/10。

干什么前后三次差异这么大啊?大家把五回的头顶消息实行,查看同三个字段四回传输所占领的字节数:

图片 11

图片 12

看待后方可窥见,第一次的须要底部之所以一点都超级小,是因为大多键值对只占用了一个字节。极度是
UserAgent、Cookie
那样的底部,第四回呼吁中须求占用非常多字节,后续伏乞中都只必要一个字节。

技艺原理

下边那张截图,取自 Google 的习性行家 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卡塔 尔(英语:State of Qatar)对于底部名称能够协作的键值对,比方
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
使用了意气风发份静态哈夫曼码表(详见卡塔 尔(英语:State of Qatar),也急需内置在顾客端和服务端之中。

此处顺便说一下,HTTP/1 的处境行信息(Method、Path、Status 等卡塔尔,在
HTTP/2中被拆成键值对放入尾部(冒号最早的那些卡塔 尔(英语:State of Qatar),雷同能够大饱眼福到字典和哈夫曼压缩。其余,HTTP/第22中学享有底部名称必需小写。

技艺原理

上边这张截图,取自 谷歌(Google卡塔 尔(英语:State of Qatar) 的习性行家 Ilya Grigorik 在 Velocity 二〇一六 • SC
会议中分享的「HTTP/2 is here, let’s
optimize!」,极度直观地陈说了
HTTP/2 中底部压缩的法规:

图片 14

自家再用浅显的言语疏解下,底部压缩须求在帮助 HTTP/2 的浏览器和服务端之间:

  • 保卫安全大器晚成份相似的静态字典(Static
    Table卡塔 尔(英语:State of Qatar),包罗不可胜举的底部名称,以致特地多如牛毛的头顶名称与值的组合;
  • 保障风度翩翩份相同的动态字典(Dynamic Table卡塔 尔(英语:State of Qatar),能够动态的丰盛内容;
  • 协助基于静态哈夫曼码表的哈夫曼编码(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
使用了意气风发份静态哈夫曼码表(详见卡塔 尔(英语:State of Qatar),也亟需内置在顾客端和服务端之中。

那边顺便说一下,HTTP/1 的图景行音讯(Method、Path、Status 等卡塔尔国,在
HTTP/第22中学被拆成键值对放入底部(冒号领头的那二个卡塔尔,相同能够享受到字典和哈夫曼压缩。别的,HTTP/2中具备尾部名称必得小写。

达成细节

刺探了 HTTP/2 底部压缩的基本原理,最终大家来看一下具体的兑现细节。HTTP/2
的头顶键值对有以下这一个情状:

1卡塔 尔(英语:State of Qatar)整个底部键值对都在字典中

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卡塔 尔(英语:State of Qatar)尾部名称在字典中,更新动态字典

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,之后七个人寄放尾部名称在静态或动态字典中的索引。接下来的叁个字节第4位H 表示尾部值是不是选用了哈夫曼编码,剩余伍人代表底部值的长度 L,后续 L
个字节正是底部值的具体内容了。举个例子下图中索引值为
32(100000卡塔 尔(阿拉伯语:قطر‎,在静态字典中询问可得
cookie;底部值使用了哈夫曼编码(1卡塔 尔(阿拉伯语:قطر‎,长度是 28(0011100卡塔 尔(阿拉伯语:قطر‎;接下去的 贰十八个字节是 cookie 的值,将其实行哈夫曼解码就能够得到具体内容。

图片 16

客商端或服务端看到这种格式的头顶键值对,会将其加多到自身的动态字典中。后续传输那样的剧情,就切合第
1 种情景了。

3卡塔 尔(英语:State of Qatar)底部名称不在字典中,更新动态字典

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

图片 17

顾客端或服务端看见这种格式的头顶键值对,会将其增加到自个儿的动态字典中。后续传输这样的从头到尾的经过,就切合第
1 种情景了。

4卡塔 尔(英语:State of Qatar)尾部名称在字典中,不容许更新动态字典

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,要求遵从以下准绳求值(大切诺基FC 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 00010001,15 +
17卡塔 尔(阿拉伯语:قطر‎,代表 cookie。须要小心的是,左券中具有写成(N+卡塔 尔(英语:State of Qatar)的数字,举个例子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卡塔 尔(英语:State of Qatar)。

完结细节

摸底了 HTTP/2 尾部压缩的基本原理,最终大家来看一下切实的落到实处细节。HTTP/2
的尾部键值对有以下那些情况:

1卡塔 尔(英语:State of Qatar)整个头部键值对都在字典中

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卡塔 尔(英语:State of Qatar),在静态字典中查询可得 :
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(100000卡塔 尔(英语:State of Qatar),在静态字典中查询可得  cookie ;尾部值使用了哈夫曼编码(1卡塔尔,长度是
28(0011100卡塔尔国;接下去的 贰18个字节是 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卡塔 尔(英语:State of Qatar)。对其具体内容进行哈夫曼解码后,可得 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卡塔 尔(英语:State of Qatar)。第1个字节去掉固定的
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 种意况至极相像,独一不一样之处是:第三个字节固定为
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
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]);
});

头顶原始数据来自于本文第三张截图,运营结果如下(静态字典只截取了少年老成有些卡塔 尔(英语:State of Qatar):

{ ‘: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卡塔 尔(英语:State of Qatar)。

总结

在展开 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卡塔 尔(英语:State of Qatar)解析到同贰个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 ·
  

图片 23

admin

网站地图xml地图