axios前端实现二进制文件上传 http 传输二进制_http

二进制分帧

在HTTP/2中,在应用层(HTTP2.0)和传输层(TCP或者UDP)之间加了一层:二进制分帧层。这是HTTP2中最大的改变。HTTP2之所以性能会比HTTP1.1有那么大的提高,很大程度上正是由于这一层的引入。

axios前端实现二进制文件上传 http 传输二进制_http_02

在二进制分帧层中, HTTP/2 会将所有传输的信息分割为更小的消息和帧(frame),并对它们采用二进制格式的编码。

信息传输术语

1、流:虚拟信道,可以承载双向消息,每个流都有一个唯一的整数标识符(1、2....N);

2、消息:逻辑上的HTTP消息,比如请求、响应,由一或多个帧组成。

3、帧:最小的通信单位,承载特定类型的数据,比如HTTP首部、负荷等等。

帧的类型

在二进制分帧的结构中,头部有8个字节(64Bit),其中有一个字节(8Bit)来标志帧的类型:

HTTP2.0规定了如下帧类型:

DATA: 用于传输HTTP消息体
HEADERS:用户传输关于流的额外的首部字段
PRIORITY:用户指定或者重新指定引用资源的优先级
RST_STRING:用于通知流的非正常终止
SETTINGS:用于通知两端通信方式的数据配置
PUSH_PROMISE:用于发出创建流和服务器引用资源的要约
PING:用于计算往返时间,执行“活性”检查
GOAWAY:用于通知对端停止在当前连接的创建流
WINDOW_UPDATE:用于针对个别流或个别连接实现流量控制
CONTINUATION:用于继续一系列首部块片段

HTTP2.0通信都在一个连接上完成,这个连接可以承载任意数据量的双向数据流。相应地,每个数据流以消息的形式发送,而消息由一或多个帧组成,这些帧可以乱序发送,然后再根据每个帧首部的流标识符重新组装。HTTP2.0的所有帧都采用二进制编码,所有首部数据都会被压缩。

axios前端实现二进制文件上传 http 传输二进制_http_03

数据帧:存放时经过HPACK算法压缩后的HTTP头部和数据体。

首部压缩的原理

HTTP2使用HPACK算法压缩请求和响应标头的元数据,这种格式支持通过静态霍夫曼编码对传输的头部字段进行编码,从而减小了传输的大小,同时这种压缩算法要求客户端和服务器同时维护和更新一个首部表,这个首部表能够跟踪和存储之前发送过的键值对,对于相同的数据不再通过每次请求和响应进行发送,假如第一个请求发送了所有的头部字段,第二个请求则只需发送有差异的字段,这样可以减少冗余的数据,降低开销。

HPACK主要包含两个压缩模块,索引表和静态霍夫曼编码,其中索引表又包含静态表和动态表。静态表包含61个预定义Header的Key value,传输的时候使用对应的索引Index替换。动态表是一个先进先出的队列,初始的时候是空的,解压header的时候按需添加,每次添加的时候放在队首,移除的时候从队尾开始,动态表的大小不是无限制的。

多路复用

在HTTP1.1中,如果客户端想发送多个并行的请求,必须使用多个TCP连接,而HTTP2的二进制分帧层突破了这一限制,所有的请求和响应都在同一个TCP连接上完成,单个连接可以承载任意数量的双向数据流,数据流以消息的形式发送,消息又由一个或多个帧组成,多个帧之间可以乱序发送,因为可以根据帧首部的流标识符进行重新组装。

上面的特性使得性能有了极大的性能提升,原因如下:

因为同一个域名只需要占用一个TCP连接,使用这个连接并行发送多个请求和响应,这样使得整个页面的资源的下载过程只需要一次慢启动,同时也避免了多个TCP连接带来的竞争问题。

可以并行交错的发送多个请求或响应,这些请求或响应之间互不影响。