一、HTTP/1.x存在的问题

根据W3Techs的数据，截至2021年10月，全球有46.5%的网站支持了HTTP/2^[1]，但是目前互联网上的内容大多数都是通过HTTP/1.1传输。因为HTTP/1.x存在一些问题导致Web程序无法完全利用网络的性能。

1.1 未被充分利用的TCP

HTTP/1.x很难榨干TCP提供的所有性能，这是因为一个TCP连接在一段时间内只能服务一个HTTP事务，虽然后面HTTP/1.1使用了管线化技术，但是由于队头阻塞等原因实际提升并不明显。

1.2 传输大小和资源数量

近年来加在网站首页需要的下载量和数据量在逐渐增加，并且已经超过了1.9MB。平均每个页面与渲染相关的资源已经超过了100个^[2]。如下图所示，这种趋势已经持续了很长时间，并且没有减缓的迹象。

transfer-size-growth.png

1.3 难以控制的延迟

如今随着软硬件升级，我们的网络越来越快，带宽越来越大，虽然我们访问页面的速度得到了很大的提升，但是这种提升也是有上限的，其中部分原因是因为HTTP/1.1提供的pipelining技术存在一些问题：（1）因为长链接可能被关闭导致重新请求，所以非幂等请求不能使用管线化技术；（2）HTTP自身不能对报文进行标记排序，所以服务端必须也得按顺序响应请求导致的队头阻塞。

二、HTTP/1.1下克服延迟的方法

开发者针对HTTP/1.1的缺点提供了一些针对性的解决方案。

2.1 Spriting雪碧图

雪碧图是将很多小图合成一张大图，然后在使用的时候通过JavaScript或者CSS重新“切割”。我们一般在使用icon时会采用这种方案，当然这种方案也有一些缺点：（1）如果某个页面，比如首页只用到了2-3个图标却不得不下载整个项目的图标；（2）更换一个图标的话所有图标都需要重新缓存。

2.2 内联

内联是一种防止发送很多小图请求的技巧，它将图片原始数去嵌入在CSS的URL里面：

.icon1 {
    background: url(data:image/png;base64,<data>) no-repeat;
  }
.icon2 {
    background: url(data:image/png;base64,<data>) no-repeat;
  }

2.3 合并压缩

大型网站一般会包含大量的JavaScript文件，开发人员一般会将这些文件合并为一个文件并且压缩，这样只需要一个HTTP事务就能将其全部下载。

2.4 分片

分片技术是指把我们的服务分散在尽可能多的主机上。因为我们前面讲了一个TCP链接在一段时间内只能服务于一个HTTP事务，那么为了加快资源下载，开发者就会增加与服务器的TCP连接，但是为了减轻服务器的压力服务更多的用户，服务器限制一个客户端只能最多建立6~8个连接，所以我们可以把我们的资源分散到不同的服务器上，这样就可以同时请求多个资源了。

三、HTTP/2

HTTP/2的主要目标是^[3]：

1. 通过启用完整的请求和响应多路复用来减少延迟；
2. 通过有效压缩HTTP headers来最小化协议开销；
3. 添加请求优先级和服务器推送。

HTTP/2不会以任何方式修改HTTP的应用程序语意，所有核心概念，例如HTTP method，status code，URI，headers等，并在新的成帧层中隐藏了所有的复杂性，所以HTTP/2可以很好地兼容之前的Web应用程序。

3.1 二进制框架层

HTTP/2的所有性能增强的核心是新的二进制帧层，它规定了HTTP/2消息如何在客户端和服务器之间进行封装和传输。
[图片上传失败...(image-9d719f-1637399420908)]
与换行符分隔的明文HTTP/1.x协议不同，所有HTTP/2通信都被拆分为更小的消息和帧，每个消息和帧都以二进制格式编码。

3.2 stream、message 和 frames

新的二进制帧机制的引入改变了客户端和服务器之间数据交换的方式，如下图^[3]。这里有些术语需要解释：

• stream，已建立链接内的双相字节流，可携带一个或者多个消息。
• message，映射到逻辑请求或相应消息的完整帧序列。
• frame，HTTP/2中最小通信单元，每个单元中包含一个帧头，它表示帧所属流。
  
  frame.jpg

3.3 请求和响应复用

在HTTP/1.1中，如果想并行多个请求提高性能就必须使用多个TCP连接，而HTTP/2把一个消息分解为独立的帧，并且帧头可以标示它所属的流即它所属的消息，所以HTTP/2可以在一个TCP连接中交错传输多个流。完美解决了HTTP/1.1管线化技术的队头阻塞问题。

多路复用.png

3.4 请求优先级

当我们允许多个流复用一个连接，那么客户端和服务器交错和传输帧的顺序就会成为关键的性能考虑因素。为此，HTTP/2标准允许每个流具有关联的权重和依赖项：

• 可以为每个流分配一个介于1~256的整数权重
• 每个流可以被赋予对另一个流的显示依赖。

流依赖项和券种组合允许客户端构建和传达一个“优先级树”，它表示它希望如何接受响应。但是流相关性和权重表示传输偏好而不是要求，因此不保证特定的传输顺序。

3.5 一个客户端一个连接

基于二进制帧传输机制，HTTP/2已经不需要多个TCP来支持并发了，这对服务器也更友好。

3.6 服务器推送

HTTP/2的另一个强大的新特性是服务器可以为单个客户端请求发送多个响应，也就是说除了对原始请求的响应之外，服务器还可以向客户端推送额外的资源而不必客户端明确请求。见下图^[3]:

服务端推送.png

• 推送的资源可以被客户端缓存
• 推送的资源可以被跨页面复用
• 推送的资源可以和其他资源一起复用
• 服务器可以对推送的资源进行优先级排序
• 推送的资源可以被客户端拒绝

所有服务器推送流都是通过PUSH_PROMISE帧发起的，让客户端知道自己要推送哪些资源，以避免客户端创建重复的HTTP请求。

3.7 标头压缩

为了减少协议头开销，HTTP/2使用HPACK压缩格式压缩请求和响应头元数据，该技术包括：

1. 它允许静态霍夫曼代码对传输的标头字段进行编码，从而剑豪他们各自的传输大小。

2. 它要求客户端和服务器都维护更新之前看到的标头字段索引列表。

   
   
   标头压缩

参考资料

1. Usage of HTTP/2 for websites. World Wide Web Technology Surveys. W3Techs. Oct 10, 2021. ↩

2. http2 explnined ↩

3. High Performance Browser Networking | O'Reilly ↩ ↩ ↩