搞懂 HTTP 1.0 /1.1/2.0 协议差别

[rico-c]

1. 如何快速查看指定网站使用HTTP 1.1还是HTTP 2.0？

在Chrome中打开开发者工具的Network标签卡，右键表头将Protocol选上即可查看，h2即为HTTP2.0。

2.HTTP 1.1与1.0相比有什么差异？

HTTP 1.1于1997年1月发布，在HTTP 2.0发布前，一直被使用了15年，下面为HTTP 1.1 和1.0之间的主要差异：

• 长连接

  在HTTP 0.9和1.0中，TCP连线在每一次请求/回应对之后关闭。在HTTP 1.1中，引入了保持连线的机制，一个连接可以重复在多个请求/回应使用。持续连线的方式可以大大减少等待时间，因为在发出第一个请求后，双方不需要重新运行TCP握手程序。

• 同一个ip和端口提供不同服务

  能够使不同域名配置在同一个IP地址的服务器上，web server上的多个虚拟站点可以共享同一个ip和端口。

• 带宽

  HTTP 1.1还使改进了HTTP 1.0的带宽。 例如，HTTP 1.1引入了分块传输编码，以允许传递内容可以在持续连在线被流传输而不必使用到缓冲器。HTTP管道允许客户端在收到每个回应之前发送多个请求，进一步减少用户感受到的滞后时间。协议的另一个补充是字节服务，允许客户端请求资源的某一部分，服务器仅回应某资源的指明部分。

3.HTTP 2.0新功能

HTTP/1.x 协议以换行符作为纯文本的分隔符，而 HTTP/2 将所有传输的信息分割为更小的消息和帧，并采用二进制格式对它们编码。下面为HTTP2.0提供的新功能：

• 请求与响应复用

  在 HTTP 1.x 协议中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制,而在HTTP 2.0中实现了：

  • 并行交错地发送多个请求，请求之间互不影响。
  • 并行交错地发送多个响应，响应之间互不干扰。
  • 使用一个连接并行发送多个请求和响应。
  • 所有通信都在一个 TCP 连接上完成，此连接可以承载任意数量的双向数据流。

  HTTP 1.x 与HTTP 2的网络请求差异如下图：

• 数据流优先级

  可以明确表达网络传输中中资源的优先级，网络中拥有多种资源类型，它们的依赖关系和权重各不相同，HTTP/2 协议还允许客户端随时更新这些优先级，进一步优化了浏览器性能。换句话说，我们可以根据用户互动和其他信号更改依赖关系和重新分配权重。

  类似于”请先处理和传输响应 D，然后再处理和传输响应 C“

• 服务器推送

  HTTP/2 打破了严格的请求-响应语义，支持一对多和服务器发起的推送工作流，服务器可以对一个客户端请求发送多个响应。 换句话说，除了对最初请求的响应外，服务器还可以向客户端推送额外资源，而无需客户端明确地请求。

  在合适的时机，推送合适的资源，Push比No Push带来的网站时延提升是明显的。在网络带宽足够承载推送资源的前提下，我们预先推送浏览器后续请求需要的资源，网站的整体加载时间得到缩短。

  

• 标头压缩

  每个 HTTP 传输都承载一组标头，这些标头说明了传输的资源及其属性。 在 HTTP/1.x 中，此元数据始终以纯文本形式，通常会给每个传输增加 500–800 字节的开销。如果使用 HTTP Cookie，增加的开销有时会达到上千字节。为了减少此开销和提升性能，HTTP/2 使用 HPACK 压缩格式压缩请求和响应标头元数据，这种格式采用两种简单但是强大的技术：

  1. 这种格式支持通过静态 Huffman 代码对传输的标头字段进行编码，从而减小了各个传输的大小。
  2. 这种格式要求客户端和服务器同时维护和更新一个包含之前见过的标头字段的索引列表（换句话说，它可以建立一个共享的压缩上下文），此列表随后会用作参考，对之前传输的值进行有效编码。

4.HTTP 2.0兼容性

直接上图：

• 浏览器端：

• 服务端

  Node.js从 v8.4.0版本开始支持HTTP/2

5.在Node.js中使用HTTP 2.0

• 安装http2支持模块

npm i --save http2

• 配置SSL证书

• Node.js代码

  引用官方文档的一个例子：

const http2 = require('http2');
const fs = require('fs');

const server = http2.createSecureServer({
 key: fs.readFileSync('localhost-privkey.pem'),
 cert: fs.readFileSync('localhost-cert.pem')
});
server.on('error', (err) => console.error(err));

server.on('stream', (stream, headers) => {
 stream.respond({
   'content-type': 'text/html',
   ':status': 200
 });
 stream.end('Hello World');
});

server.listen(8443);

关于Node.js关于HTTP 2.0的更多API可以查看官方文档Node.js-HTTP/2官方文档