HTTP/2的理解

HTTP/2主要通过以下方法减少延迟，改进页面的加载速度：

• HTTP Header的压缩，采用HPack算法。
• HTTP/2的Server Push。
• 请求的pipeline。
• 修复在HTTP 1.x的队头阻塞问题。
• 在单个TCP连接里多工复用请求。

HTTP/2 头部压缩（HPack）

使用HPack算法压缩HTTP/2的头部，下面简单介绍Hpack的工作原理：

简单说，HTTP头压缩需要在HTTP/2客户端和服务端之间：

• 维护一份相同的静态表（Static Table），包含常见的头部名称，和其键值对；
• 维护一份相同的动态表（Dynamic Table），可以动态地添加内容；
• 基于静态哈夫曼码表的哈夫曼编码（Huffman Coding）；

比如，在HTTP头里，有些key:value是固定的：

:method: GET
:scheme: http

在编码时，它们直接用一个index编号代替，例如:method:GET是2，这些在一个静态表定义。静态表的定义如下，总共61个Header Name，点击URL https://tools.ietf.org/html/rfc7541#appendix-A查看所有静态表的定义。
列出定义的部分键值对：

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

使用静态表、动态表、以及Huffman编码可以极大地提升压缩效果。对于静态表里的字段，原来需要N个字符表示的，现在只需要一个索引即可。对于静态、动态表中不存在的内容，还可以使用哈夫曼编码来减小体积。

HTTP/2的多路复用

HTTP/2定义了流（Stream）和帧（Frame）。基本协议单元变小了，从消息（Message）变成了帧；流作为一种虚拟的通道，用来传输帧。与创建TCP连接相比，创建流的成本几乎为零。基本协议单元的变小也大大提高了连接的利用效率。

HTTP 1.1 默认启用长TCP连接，但所有的请求-响应都是按序进行的(这里的长连接可理解成半双工协议。即便是HTTP 1.1引入了管道机制，也是如此)。复用同一个TCP连接期间，即便是通过管道同时发送了多个请求，服务端也是按请求的顺序依次给出响应的；而客户端在未收到之前所发出所有请求的响应之前，将会阻塞后面的请求(排队等待)，这称为"队头堵塞"（Head-of-line blocking）。

HTTP/2复用TCP连接则不同，虽然依然遵循请求-响应模式，但客户端发送多个请求和服务端给出多个响应的顺序不受限制，这样既避免了"队头堵塞"，又能更快获取响应。在复用同一个TCP连接时，服务器同时(或先后)收到了A、B两个请求，先回应A请求，但由于处理过程非常耗时，于是就发送A请求已经处理好的部分， 接着回应B请求，完成后，再发送A请求剩下的部分。HTTP/2长连接可以理解成全双工的协议。

一幅图了解上面的描述：

HTTP/2的Server Push

HTTP/2与HTTP/1最大的不同之处在于，前者在后者的基础上定义了流和帧，实现了多路复用。这是Server Push的基础。

在HTTP 1.1里，在同一个 TCP 连接里面，上一个回应（response）发送完了，服务器才能发送下一个，但在HTTP/2里，可以将多个回应一起发送。

无PUSH模式

下图是PUSH模式，当请求一个HTML时，如果HTML里有CSS文件，server会一并推给client，而不像在HTTP 1.1下，还需要再发一个CSS的请求。

PUSH模式

根据上图，从理论上PUSH模式下性能会好很多。

举个例子解释一下。下面是一个简单的HTML页面，假说是index.html 。

  


  
This is a sample to illustrate how HTTP/2 works
  

这里有三个文件需要处理：该HTML页面、CSS文件style.css以及图片example.png。在HTTP 1.1里为了处理这三个文件，Client需要发三个请求给Server。

首先，发送一个请求index.html。

GET /index.html HTTP/1.1

Client解析该HTML文件，继而知道有2个style.css和example.png资源文件下载。

Client继续发送2个请求下载他们。

GET /style.css  HTTP/1.1
GET /example.png  HTTP/1.1

如果使用HTTP/2的Server Push特征，根据上面的PUSH模式图，我们可以看出，Server还没有收到Client的请求，就把各种资源推送给Client。

拿上面例子继续举例，当Client只请求index.html，但是Server把index.html、style.css、example.png全部发送给浏览器。这样只需要一轮 HTTP 通信，Client就得到了全部资源。

参考

• 详解 HTTP/2 Server Push——进一步提升页面加载速度

• http/2 多路复用技术

• 深入浅出：HTTP/2