HTTP2.0

Posted 2021-04-18 同花技术笔记

前言

可以说 HTTP2.0 的出现，大幅度的提高了请求的效率，减少了延迟，并且覆盖率越发的广泛，使用的人越来越多，到底是为啥呢，它比起 HTTP1.0/1.1 又好在了哪里？

如何优化HTTP？

看到这里我们大概都知道 HTTP1.0 到 HTTP2.0 其实就是一个优化，提高效率的过程，那么抛开这些版本，我们在大方向上看，一个HTTP请求，我们需要在什么方向上去给它进行优化呢？

其实影响 HTTP 网络请求的主要因素就有两个: 带宽和延迟

带宽

带宽一词最初指的是电磁波频带的宽度，也就是信号的最高频率与最低频率的差值。目前，它被更广泛地借用在数字通信中，用来描述 网络或线路理论上传输数据的最高速率 。

简单来说就是网速，这里的话随着时间的推移，我们可以看到网络基础设备越来越猛，我们日常的网速也在大幅度提升。

所以目前很少关心带宽的优化，一般都考虑如何 减少延迟 的问题。

延迟

网络延迟是指各式各样的数据在网络介质中通过网络协议(如TCP/IP)进行传输， 如果信息量过大不加以限制 ，超额的网络流量就会导致设备反应缓慢，造成网络延迟。

造成延迟的几个点:

1. 浏览器阻塞: 浏览器会因为一些原因阻塞请求，浏览器对于同一个域名， 同时只能有几个连接是有限制的 （不同的浏览器都不同），超过浏览器最大连接的限制，后续请求就会被阻塞，这点的话可以自己随便找个网页F12一下看看。
2. DNS查询: 浏览器需要解析目标服务器的IP才可以建立连接，一般都是通过 DNS解析域名成IP地址 ，这里一般用DNS缓存到浏览器，或者本地host文件来减少延迟。
3. 建立连接: 建立HTTP连接的过程是需要有 TCP的三次握手 的，浏览器最快也要在三次握手之后才可以提交HTTP请求报文，达到真正的建立连接，但是这些连接无法服用会导致每次都需要三次握手和慢启动。所以TCP三次握手在高延迟下影响比较明显，满启动对大文件的请求影响大。

HTTP2.0

HTTP1.x的特点

更新 HTTP2.0 自然是因为 HTTP1.x 有缺点需要改进的，那我们来看看 HTTP1.x 主要有什么缺点。

HTTP1.0

HTTP1.0 只支持 GET POST HEAD 请求方法。

HTTP1.0 的主要问题就是:

1. 连接无法复用， HTTP1.0 规定浏览器与服务器保持较短时间的连接， 浏览器每次请求都和服务器经过三次握手跟慢启动 ，毫无疑问这握手跟慢启动都会造成很高的延迟。
2. 线头阻塞，请求队列第一个请求没有响应，后续的请求就会被阻塞。

HTTP1.1

HTTP1.1 在 HTTP1.0 的基础上新增了 PUT DELETE OPTIONS CONNECT TRACE 请求方法。

HTTP1.1 在 HTTP1.0 的基础上做了些优化:

1. 支持长连接，在请求头上用connection来控制（close/keep-alive），它代表着 「 一个TCP连接可以传送多个HTTP的请求和响应 」 ，减少了TCP三次握手和慢启动的消耗。另外允许客户端不用等待当前请求响应就直接发送下一次的请求。

2. 缓存处理 ，在 HTTP1.0 中主要使用Headers里的If-Modified-Since, Expires来做为缓存判断的标准，HTTP1.1 则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略。

3. 带宽优化及网络连接的使用 ， HTTP1.0 中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能， HTTP1.1 则在请求头引入了range头域，它允许只请求资源的某个部分，即返回码是206（Partial Content），这样就方便了开发者自由的选择以便于充分利用带宽和连接。

SPDY

SPDY (speedy)是Google开发的 基于TCP的会话层协议 ，用以 「 最小化网络延迟 」 ， 「 提升网络速度 」 ， 「 优化用户的网络使用体验 」 。SPDY并不是一种用于替代HTTP的协议，而是对HTTP协议的增强。新协议的功能包括数据流的 「 多路复用 」 、 「 请求优先级 」 以及 「 HTTP报头压缩 」 。谷歌表示，引入SPDY协议后，在实验室测试中页面加载速度比原先快64%。

对于SPDY的个人理解

其实我个人认为这里 SPDY 速度能提高这么多的重点不是报头压缩，不是ServerPush，也不是请求优先级的问题，而是它的 「 多路复用机制 」 。

SPDY允许在一个连接上无限制的并发流。因为请求在一个通道上，TCP效率更高；达到了更少的网络连接，发出更少更密集的数据包。

结合上面所说的，我们可以发现 「 请求优先级 」 其实就是为了无限制并发流有可能会引发的线头阻塞问题: 「 如果带宽通道受限制，客户端可能会因为防止堵塞通道而阻止请求 」。为了克服这个问题，SPDY实行请求优先级，客户端从服务端请求它希望的项目数量，并为每个请求设立优先级，这可以防止在网络通道被非关键资源堵塞时，高优先级资源被挂起。

具体我们在下面的 HTTP2.0 再细讲。

HTTP2.0特点

从 HTTP1.0 到 HTTP1.1 再到 SPDY， 我们可以看到大部分的优化都是在延迟上做的，大家应该都大概了解了整个优化的过程，那现在我们看看 HTTP2.0 到底做了什么。

二进制传输

HTTP2.0 中所有加强性能的核心都是 「 二进制传输 」 ，在 HTTP1.x 中，我们都是通过文本的方式传输数据的。基于文本的方式传输数据存在很多缺陷，文本的表现形式有多样性，因此要做到健壮性考虑的场景必然有很多，但是二进制则不同，只有0和1的组合，因此选择了二进制传输，实现方便。在 HTTP2.0 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。

为了保证HTTP不受影响，那就需要在应用层 「 HTTP2.0 」 和传输层 「 TCP or UDP 」 之间增加一个二进制分帧层。在二进制分帧层上，HTTP2.0会将所有传输的信息分为更小的 「 消息和帧 」 ，并采用二进制格式编码，其中HTTP1.x的首部信息会被封装到Headers帧，而Request Body则封装到Data帧。

多路复用

在HTTP1.0中，我们经常会使用到雪碧图、使用多个域名等方式来进行优化，都是因为浏览器限制了同一个域名下的请求数量，当页面需要请求很多资源的时候， 「 队头阻塞 」 会导致在达到最大请求时，资源需要等待其他资源请求完成后才能继续发送。

HTTP2.0中，有两个概念非常重要：帧（frame）和流（stream）。帧是最小的数据单位，每个帧会标识出该帧属于哪个流，流是多个帧组成的数据流。

所谓多路复用，即在一个TCP连接中存在多个流，即可以同时发送多个请求，对端可以通过帧中的表示知道该帧属于哪个请求。在客户端，这些帧乱序发送，到对端后再根据每个帧首部的流标识符重新组装。通过该技术，可以避免HTTP旧版本的队头阻塞问题，极大提高传输性能。

压缩Headers

在HTTP1.0中，我们使用文本的形式传输header，在header中携带cookie的话，每次都需要重复传输几百到几千的字节，这着实是一笔不小的开销。在HTTP2.0中，我们使用了HPACK（HTTP2头部压缩算法）压缩格式对传输的header进行编码，减少了header的大小。并在两端维护了索引表，用于记录出现过的header，后面在传输过程中就可以传输已经记录过的header的键名，对端收到数据后就可以通过键名找到对应的值。

服务器推送

在 HTTP2.0 中，服务端可以在客户端某个请求后，主动推送其他资源。

在之前的话，一般是客户端向浏览器请求某个静态页面 /index.html 之后，浏览器对 html 进行解析，完了再一个一个去请求一些需要的图片、 css 和 js 等静态资源来渲染数据。

而 Server Push 在这里做到的就是，在浏览器请求 /index.html 的同时，提前把相应需要渲染的静态数据 push 给浏览器，从而减少了浏览器后续请求时间，可以直接渲染，也减少了用户的等待时间。

这里 Server Push 不仅仅减少了关键内容网络请求的耗时问题，它更优化了以前的一些开发方式，例如将 CSS 和 JavaScript 内联在 HTML， 以及使用 data URI 方案将二进制数据嵌入到 CSS 和 HTML 中。

PS

都结合网上资料加上自己的一些理解，如果有影响到人的地方，可以联系我：[e-mail]