原文出处:
imququ(@屈光宇)
我们知道,HTTP/2 协议由两个 RFC 组成:一个是 RFC
7540,描述了 HTTP/2
协议本身;一个是 RFC
7541,描述了 HTTP/2
协议中使用的头部压缩技术。本文将通过实际案例带领大家详细地认识 HTTP/2
头部压缩这门技术。
本文作者: 伯乐在线 –
JerryQu
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。
我们知道,HTTP/2 协议由两个 RFC 组成:一个是 RFC
7540,描述了 HTTP/2
协议本身;一个是 RFC
7541,描述了 HTTP/2
协议中使用的头部压缩技术。本文将通过实际案例带领大家详细地认识 HTTP/2
头部压缩这门技术。
在 HTTP/1 中,HTTP 请求和响应都是由「状态行、请求 /
响应头部、消息主体」三部分组成。一般而言,消息主体都会经过 gzip
压缩,或者本身传输的就是压缩过后的二进制文件(例如图片、音频),但状态行和头部却没有经过任何压缩,直接以纯文本传输。
随着 Web 功能越来越复杂,每个页面产生的请求数也越来越多,根据 HTTP
Archive 的统计,当前平均每个页面都会产生上百个请求。越来越多的请求导致消耗在头部的流量越来越多,尤其是每次都要传输
UserAgent、Cookie 这类不会频繁变动的内容,完全是一种浪费。
以下是我随手打开的一个页面的抓包结果。可以看到,传输头部的网络开销超过
100kb,比 HTML 还多:
下面是其中一个请求的明细。可以看到,为了获得 58
字节的数据,在头部传输上花费了好几倍的流量:
HTTP/1
时代,为了减少头部消耗的流量,有很多优化方案可以尝试,例如合并请求、启用
Cookie-Free
域名等等,但是这些方案或多或少会引入一些新的问题,这里不展开讨论。
在 HTTP/1 中,HTTP 请求和响应都是由「状态行、请求 /
响应头部、消息主体」三部分组成。一般而言,消息主体都会经过 gzip
压缩,或者本身传输的就是压缩过后的二进制文件(例如图片、音频),但状态行和头部却没有经过任何压缩,直接以纯文本传输。
随着 Web 功能越来越复杂,每个页面产生的请求数也越来越多,根据 HTTP
Archive
的统计,当前平均每个页面都会产生上百个请求。越来越多的请求导致消耗在头部的流量越来越多,尤其是每次都要传输
UserAgent、Cookie 这类不会频繁变动的内容,完全是一种浪费。
以下是我随手打开的一个页面的抓包结果。可以看到,传输头部的网络开销超过
100kb,比 HTML 还多:
下面是其中一个请求的明细。可以看到,为了获得 58
字节的数据,在头部传输上花费了好几倍的流量:
HTTP/1
时代,为了减少头部消耗的流量,有很多优化方案可以尝试,例如合并请求、启用
Cookie-Free
域名等等,但是这些方案或多或少会引入一些新的问题,这里不展开讨论。
接下来我将使用访问本博客的抓包记录来说明 HTTP/2
头部压缩带来的变化。如何使用 Wireshark 对 HTTPS
网站进行抓包并解密,请看我的这篇文章。本文使用的抓包文件,可以点这里下载。
首先直接上图。下图选中的 Stream 是首次访问本站,浏览器发出的请求头:
从图片中可以看到这个 HEADERS 流的长度是 206 个字节,而解码后的头部长度有
451 个字节。由此可见,压缩后的头部大小减少了一半多。
然而这就是全部吗?再上一张图。下图选中的 Stream
是点击本站链接后,浏览器发出的请求头:
可以看到这一次,HEADERS 流的长度只有 49 个字节,但是解码后的头部长度却有
470 个字节。这一次,压缩后的头部大小几乎只有原始大小的 1/10。
为什么前后两次差距这么大呢?我们把两次的头部信息展开,查看同一个字段两次传输所占用的字节数:
对比后可以发现,第二次的请求头部之所以非常小,是因为大部分键值对只占用了一个字节。尤其是
UserAgent、Cookie
这样的头部,首次请求中需要占用很多字节,后续请求中都只需要一个字节。
接下来我将使用访问本博客的抓包记录来说明 HTTP/2
头部压缩带来的变化。如何使用 Wireshark 对 HTTPS
网站进行抓包并解密,请看我的这篇文章。
首先直接上图。下图选中的 Stream 是首次访问本站,浏览器发出的请求头:
从图片中可以看到这个 HEADERS 流的长度是 206 个字节,而解码后的头部长度有
451 个字节。由此可见,压缩后的头部大小减少了一半多。
然而这就是全部吗?再上一张图。下图选中的 Stream
是点击本站链接后,浏览器发出的请求头:
可以看到这一次,HEADERS 流的长度只有 49 个字节,但是解码后的头部长度却有
470 个字节。这一次,压缩后的头部大小几乎只有原始大小的 1/10。
为什么前后两次差距这么大呢?我们把两次的头部信息展开,查看同一个字段两次传输所占用的字节数:
对比后可以发现,第二次的请求头部之所以非常小,是因为大部分键值对只占用了一个字节。尤其是
UserAgent、Cookie
这样的头部,首次请求中需要占用很多字节,后续请求中都只需要一个字节。
下面这张截图,取自 Google 的性能专家 Ilya Grigorik 在 Velocity 2015 • SC
会议中分享的「HTTP/2 is here, let’s
optimize!」,非常直观地描述了
HTTP/2 中头部压缩的原理:
我再用通俗的语言解释下,头部压缩需要在支持 HTTP/2 的浏览器和服务端之间:
静态字典的作用有两个:1)对于完全匹配的头部键值对,例如 :
,可以直接使用一个字符表示;2)对于头部名称可以匹配的键值对,例如
method :GETcookie :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
中所有头部名称必须小写。
下面这张截图,取自 Google 的性能专家 Ilya Grigorik 在 Velocity 2015 • SC
会议中分享的「HTTP/2 is here, let’s
optimize!」,非常直观地描述了
HTTP/2 中头部压缩的原理:
我再用通俗的语言解释下,头部压缩需要在支持 HTTP/2 的浏览器和服务端之间:
静态字典的作用有两个: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
中所有头部名称必须小写。