学习和使用HTTP2.0

3,510 阅读5分钟

什么是HTTP2.0

简单来说,HTTP/2(超文本传输协议第2版,最初命名为HTTP2.0),是HTTP协议的第二个主要版本。HTTP/2是HTTP协议自1999年HTTP1.1发布后的首个更新,主要基于SPDY协议。 HTTP2.0的特点是:在不改动HTTP语义、方法、状态码、URI及首部字段的情况下,大幅度提高了web性能。

先来感受一下HTTP2.0到底比HTTP1.x快了多少。链接地址

什么是SPDY协议

SPDY是Speedy的昵音,意为“更快”。它是Google开发的基于TCP协议的应用层协议。目标是优化HTTP协议的性能,通过压缩、多路复用和优先级等技术,缩短网页的加载时间并提高安全性。SPDY协议的核心思想是尽量减少TCP连接数。SPDY并不是一种用于替代HTTP的协议,而是对HTTP协议的增强。

HTTP1.x的局限性

1.慢

影响一个网络请求的因素主要有两个,带宽和延迟。今天的网络基础建设已经使得带宽得到极大的提升,大部分时候都是延迟在影响响应速度。

2.连接无法复用

连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显,慢启动则对文件类大请求影响较大。

3.队头阻塞

队头阻塞(Head-of-line blocking或缩写为HOL blocking)在计算机网络的范畴中是一种性能受限的现象。它的原因是一列的第一个数据包(队头)受阻而导致整列数据包受阻。例如它有可能在缓存式输入的交换机中出现,有可能因为传输顺序错乱而出现,亦有可能在HTTP流水线中有多个请求的情况下出现。

Head-of-line blocking会导致带宽无法被充分利用,以及后续健康请求被阻塞。

HTTP2.0特点

1. 二进制传输

区别于 HTTP1.x 通过文本的方式传输数据,HTTP2.0 采用二进制传输。

在HTTP2.0中引入了新的编码机制,所有传输的数据都会被分割,并采用二进制格式编码。

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

2. 多路复用

在HTTP1.0中,我们经常会使用到雪碧图、使用多个域名等方式来进行优化,都是因为浏览器限制了同一个域名下的请求数量,当页面需要请求很多资源的时候,队头阻塞(Head of line blocking)会导致在达到最大请求时,资源需要等待其他资源请求完成后才能继续发送。 HTTP2.0中,有两个概念非常重要:帧(frame)和流(stream)。 帧是最小的数据单位,每个帧会标识出该帧属于哪个流,流是多个帧组成的数据流。 所谓多路复用,即在一个TCP连接中存在多个流,即可以同时发送多个请求,对端可以通过帧中的表示知道该帧属于哪个请求。在客户端,这些帧乱序发送,到对端后再根据每个帧首部的流标识符重新组装。通过该技术,可以避免HTTP旧版本的队头阻塞问题,极大提高传输性能。

多路复用

3. Header压缩

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

4. 服务器Push

在HTTP2.0中,服务端可以在客户端某个请求后,主动推送其他资源。 可以想象一下,某些资源客户端是一定会请求的,这时就可以采取服务端push的技术,提前给客户端推送必要的资源,就可以相对减少一点延迟时间。在浏览器兼容的情况下也可以使用prefetch。

5. 更安全

HTTP2.0使用了tls的拓展ALPN做为协议升级,除此之外,HTTP2.0对tls的安全性做了近一步加强,通过黑名单机制禁用了几百种不再安全的加密算法。

如何使用

在使用之前先来了解一下它的兼容性。

主流浏览器基本都支持 HTTP2.0,而且即使不支持,像 Nginx 是可以自动向下兼容 HTTP 1.1 的。Nginx 配置可以参考 Nginx 上配置 HTTP/2 简明教程

对前端的影响

因为有了多路复用加持,减少HTTP请求的最佳实践不再适用 如合并JS、CSS文件(Concatenation),多个图片或图标合并(Spriting),将较小的JS或CSS文件内嵌到HTML中(Inlining),合并HTML文件(Vulcanize)等。

因此在做项目优化时,要根据具体的业务场景来进行,不能一味的追求减少 HTTP 请求而增加单个请求的压力。

参考文章:

【快速入门系列】一篇文章让你入门HTTP2.0

谈谈HTTP/2对前端的影响

浅谈:HTTP 2.0 的二进制帧、流、多路复用