永利402com官方网站头顶压缩手艺介绍

永利402com官方网站

HTTP/2 底部压缩技艺介绍

2016/04/13 · 基本功技能 ·
HTTP/2

正文小编: 伯乐在线 –
JerryQu
。未经我许可,防止转发!
接待参与伯乐在线 专栏编辑者。

我们掌握,HTTP/2 左券由多个 奔驰G级FC 组成:二个是 RFC
7540,描述了 HTTP/2
合同本人;一个是 RFC
7541,描述了 HTTP/2
左券中央银行使的底部压缩工夫。本文将经超过实际际案例指引大家详细地认知 HTTP/2
尾部压缩这门技能。

HTTP/2 头部压缩技艺介绍

2015/11/03 · HTML5 ·
HTTP/2

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

我们精晓,HTTP/2 公约由五个 RAV4FC 组成:三个是 RFC
7540,描述了 HTTP/2
协议本身;贰个是 RFC
7541,描述了 HTTP/2
契约中央银行使的头顶压缩技能。本文将透超过实际际案例指引大家详细地认识 HTTP/2
尾部压缩那门技术。

为啥要裁减

在 HTTP/1 中,HTTP 须要和响应都是由「状态行、须要 /
响应尾部、新闻主体」三局地构成。常常来讲,音信主体都会由此 gzip
压缩,也许作者传输的正是减掉过后的二进制文件(举例图片、音频),但气象行和底部却未曾经过其余压缩,直接以纯文本传输。

搭乘飞机 Web 功效进一步复杂,每种页面发生的倡议数也越扩大,依据 HTTP
Archive
的总括,当前平均各个页面都会时有产生不菲个央浼。越来越多的伸手导致消耗在头顶的流量越来越多,特别是每一次都要传输
UserAgent、Cookie 那类不会反复更换的内容,完全部都以往生可畏种浪费。

以下是本人顺手展开的三个页面包车型地铁抓包结果。能够观望,传输底部的网络支付超过100kb,比 HTML 还多:

永利402com官方网站 1

上边是中间二个央浼的仔细。能够见见,为了拿走 58
字节的数量,在头顶传输上海消防费了几许倍的流量:

永利402com官方网站 2

HTTP/1
时代,为了减少尾部消耗的流量,有大多优化方案能够尝试,举个例子合併供给、启用
库克ie-Free
域名等等,可是那个方案或多或少会引进一些新的难题,这里不张开研讨。

缘何要裁减

在 HTTP/1 中,HTTP 央浼和响应都以由「状态行、央浼 /
响应尾部、信息主体」三部分组成。常常来讲,新闻主体都会因此 gzip
压缩,恐怕本身传输的正是压缩过后的二进制文件(比如图片、音频),但状态行和尾部却从未通过其余压缩,直接以纯文本传输。

随着 Web 功能特别复杂,各个页面发生的伏乞数也愈发多,依据 HTTP
Archive 的计算,当前平均每一个页面都会产生很多少个央浼。更加多的伏乞导致消耗在头顶的流量更多,特别是每便都要传输
UserAgent、Cookie 那类不会频仍更换的原委,完全部都以风姿浪漫种浪费。

以下是作者顺手打开的三个页面包车型地铁抓包结果。能够看见,传输尾部的互连网支出超越100kb,比 HTML 还多:

永利402com官方网站 3

上边是中间一个伸手的有心人。可以看出,为了赢得 58
字节的数额,在头顶传输上海消防费了某个倍的流量:

永利402com官方网站 4

HTTP/1
时代,为了减弱底部消耗的流量,有广大优化方案能够尝试,比方合并央求、启用
Cookie-Free
域名等等,但是这几个方案或多或少会引进一些新的题材,这里不伸开讨论。

减少后的效益

接下去自身将选取访谈本博客的抓包记录以来明 HTTP/2
尾部压缩带来的变化。怎么样利用 Wireshark 对 HTTPS
网址进行抓包并解密,请看自己的那篇小说。

先是直接上海图书馆。下图选中的 Stream 是第三次访谈本站,浏览器发出的伸手头:

永利402com官方网站 5

从图纸中得以看看这几个 HEADE昂科拉S 流的长度是 206 个字节,而解码后的头顶长度有
451 个字节。总来讲之,压缩后的底部大小减少了四分之二多。

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

永利402com官方网站 6

能够看来这一遍,HEADE卡宴S 流的长短独有 49 个字节,不过解码后的头顶长度却有
470 个字节。这二次,压缩后的尾部大小差相当的少唯有原本大小的 1/10。

为何前后五回差异这么大呢?我们把一次的头顶消息进行,查看同三个字段三遍传输所据有的字节数:

永利402com官方网站 7

永利402com官方网站 8

对照后方可开采,首回的乞请底部之所以极小,是因为大多数键值对仅占用了一个字节。特别是
UserAgent、Cookie
这样的底部,第叁遍呼吁中须求占用比很多字节,后续央浼中都只须要二个字节。

降低后的效用

接下去本身将采取访谈本博客的抓包记录以来明 HTTP/2
底部压缩带来的变动。怎么着使用 Wireshark 对 HTTPS
网址举办抓包并解密,请看自己的这篇文章。本文使用的抓包文件,能够点此间下载。

率先直接上海教室。下图选中的 Stream 是首次访谈本站,浏览器发出的恳求头:

永利402com官方网站 9

从图片中得以观望这些 HEADEEscortS 流的尺寸是 206 个字节,而解码后的头顶长度有
451 个字节。显而易见,压缩后的尾部大小裁减了一半多。

可是这正是全体吧?再上一张图。下图选中的 Stream
是点击本站链接后,浏览器发出的诉求头:

永利402com官方网站 10

能够观看那二遍,HEADEEvoqueS 流的长度独有 49 个字节,不过解码后的头顶长度却有
470 个字节。这一回,压缩后的底部大小差非常的少独有原本大小的 1/10。

缘何前后四次差别这么大啊?大家把一遍的头顶消息实行,查看同八个字段两回传输所攻陷的字节数:

永利402com官方网站 11

永利402com官方网站 12

相比后能够开采,第二回的央求尾部之所以比非常小,是因为大多键值对只占用了一个字节。特别是
UserAgent、Cookie
那样的尾部,第贰次倡议中须要占用比较多字节,后续央求中都只必要三个字节。

本事原理

上面那张截图,取自 Google 的习性行家 Ilya Grigorik 在 Velocity 二〇一四 • SC
会议中享受的「HTTP/2 is here, let’s
optimize!」,特别直观地陈述了
HTTP/2 中尾部压缩的法规:

永利402com官方网站 13

我再用通俗的言语表达下,头部压缩要求在援救 HTTP/2 的浏览器和服务端之间:

  • 维护意气风发份相符的静态字典(Static
    Table),包蕴袖手阅览的头顶名称,以至很何足为奇的头顶名称与值的整合;
  • 尊崇意气风发份相似的动态字典(Dynamic Table),能够动态地抬高内容;
  • 补助基于静态哈夫曼码表的哈夫曼编码(Huffman Coding);

永利402com官方网站 ,静态字典的成效有两个: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中学有所底部名称必得小写。

技能原理

上边这张截图,取自 谷歌(Google) 的习性行家 Ilya Grigorik 在 Velocity 2016 • SC
会议中分享的「HTTP/2 is here, let’s
optimize!」,非常直观地描述了
HTTP/2 中尾部压缩的规律:

永利402com官方网站 14

自家再用浅显的言语批注下,尾部压缩必要在帮助 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中全部底部名称必得小写。

实现细节

刺探了 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

永利402com官方网站 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(100000),在静态字典中询问可得
cookie;尾部值使用了哈夫曼编码(1),长度是 28(0011100);接下去的 三十多个字节是 cookie 的值,将其进行哈夫曼解码就能获取具体内容。

永利402com官方网站 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
种情景相近,只是出于尾部名称不在字典中,所以首先个字节固定为
01000000;接着注明名称是不是接受哈夫曼编码及长度,并放上名称的具体内容;再评释值是不是使用哈夫曼编码及长度,最后放上值的具体内容。举个例子下图中名称的尺寸是
5(0000101),值的长短是
6(0000110)。对其具体内容实行哈夫曼解码后,可得 pragma: no-cache

永利402com官方网站 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,只剩余多个人来寄放在索引了,如下图:

永利402com官方网站 18

这里供给介绍此外二个知识点:对整数的解码。上海体育场合中率先个字节为
00011111,并不表示尾部名称的目录为 15(1111)。第二个字节去掉固定的
0001,只剩几个人可用,将位数用 N 表示,它只能用来表示小于「2 ^ N – 1 =
15」的卡尺头 I。对于 I,需求根据以下法则求值(CRUISERFC 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+)的数字,比如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

永利402com官方网站 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,之后伍人存放尾部名称在静态或动态字典中的索引。接下来的一个字节第4位H 表示尾部值是或不是接纳了哈夫曼编码,剩余陆个人代表尾部值的长度 L,后续 L
个字节正是底部值的具体内容了。举个例子下图中索引值为
32(100000),在静态字典中查询可得  cookie ;尾部值使用了哈夫曼编码(1),长度是
28(0011100);接下去的 三十个字节是 cookie 的值,将其进行哈夫曼解码就会获得具体内容。

永利402com官方网站 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 。

永利402com官方网站 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,只剩余四位来贮存索引了,如下图:

永利402com官方网站 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 种情况非常相近,独一不相同之处是:第三个字节固定为
00010000。这种情况超级少见,未有截图,各位能够脑补。相像,这种格式的头顶键值对,也不允许被增多到动态字典中,只好利用哈夫曼编码来压缩体量。

实际,合同中还显著了与 4、5 特别相同的其它三种格式:将 4、5
格式中的第四个字节第几个人由 1 改为 0
就可以。它代表「本次不立异动态词典」,而 4、5
代表「绝对不允许更新动态词典」。差异不是十分大,这里略过。

清楚了尾部压缩的手艺细节,理论上能够比较轻巧写出 HTTP/2
尾部解码工具了。作者相比较懒,间接找来 node-http第22中学的 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已经那样做了,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 赞 收藏
评论

永利402com官方网站 23

打赏支持小编写出更加多好文章,谢谢!

任选风流倜傥种支付办法

永利402com官方网站 24
永利402com官方网站 25

1 赞 3 收藏
评论

关于作者:JerryQu

永利402com官方网站 26

潜心 Web 开荒,关注 Web
质量优化与白山。
个人主页 ·
小编的篇章 ·
2 ·
  

永利402com官方网站 23

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图