www.qjdy.com-奇迹赌场 > www.qjdy.com官网 > 本文作者

原标题:本文作者

浏览次数:193 时间:2019-10-29

HTTP/2 底部压缩技巧介绍

2016/04/13 · 基本功手艺 · HTTP/2

正文作者: 伯乐在线 - JerryQu 。未经笔者许可,防止转发!
招待参与伯乐在线 专辑小编。

大家驾驭,HTTP/2 合同由三个 LacrosseFC 组成:三个是 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/2 底部压缩带来的浮动。怎么着采纳 Wireshark 对 HTTPS 网址进行抓包并解密,请看笔者的那篇作品。

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

图片 3

从图片中能够见见这一个 HEADELacrosseS 流的尺寸是 206 个字节,而解码后的头顶长度有 451 个字节。同理可得,压缩后的底部大小收缩了大要上多。

而是那就是全方位吧?再上一张图。下图选中的 Stream 是点击本站链接后,浏览器发出的伸手头:

图片 4

可以看看这三次,HEADEKugaS 流的长短唯有 49 个字节,然而解码后的底县长度却有 470 个字节。那壹遍,压缩后的头顶大小大致唯有原本大小的 1/10。

何以前后两回差别这么大呢?大家把四回的头顶新闻进行,查看同贰个字段三回传输所占用的字节数:

图片 5

图片 6

相对来说后得以开采,第3回的号召底部之所以极小,是因为大多数键值对只占用了一个字节。非常是 UserAgent、Cookie 那样的底部,第1回倡议中供给占用相当多字节,后续恳求中都只必要三个字节。

技艺原理

上边那张截图,取自 Google 的属性行家 Ilya Grigorik 在 Velocity 二零一四 • SC 会议中享受的「HTTP/2 is here, let’s optimize!」,极度直观地陈说了 HTTP/2 中底部压缩的准则:

图片 7

本人再用通俗的语言表达下,尾部压缩必要在支撑 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/第22中学被拆成键值对归入尾部(冒号初阶的那多少个),相仿能够享受到字典和哈夫曼压缩。别的,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

图片 8

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 的值,将其打开哈夫曼解码就能够收获具体内容。

图片 9

客商端或服务端见到这种格式的底部键值对,会将其增添到自个儿的动态字典中。后续传输那样的内容,就适合第 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

图片 10

客商端或服务端见到这种格式的尾部键值对,会将其增加到本身的动态字典中。后续传输那样的内容,就契合第 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,只剩余几位来贮存索引了,如下图:

图片 11

此处须要介绍其余八个知识点:对整数的解码。上海体育场合中第1个字节为 00011111,并不意味着尾部名称的目录为 15(1111)。第一个字节去掉固定的 0001,只剩几位可用,将位数用 N 表示,它不能不用来代表小于「2 ^ N – 1 = 15」的整数 I。对于 I,须要根据以下准则求值(锐界FC 754第11中学的伪代码,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)解析到同多少个IP;2)使用同三个证书;

地点第一点轻易驾驭,第二点则超级轻巧被忽略。实际上 谷歌(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 专题」。

打赏扶助本身写出越来越多好文章,谢谢!

打赏笔者

打赏协理我写出更多好文章,多谢!

任选生龙活虎种支付办法

图片 12 图片 13

1 赞 3 收藏 评论

关于作者:JerryQu

图片 14

潜心 Web 开采,关心 Web 性能优化与长治。 个人主页 · 小编的作品 · 2 ·   

图片 15

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com官网,转载请注明出处:本文作者

关键词: 基础技术

上一篇:我说按模块划分好

下一篇:没有了