HTTP协议于1991年引入，至今已有近30年的历史。自第一个文档化版本(后来称为0.9)以来，它已经经历了一段相当长的历程。在本文中，我们将简要回顾HTTP协议的发展历史，重点介绍HTTP/2带来了什么，以及我们如何从中获益。我们将使用Node.js服务端来实现它。

HTTP协议简史

HTTP的第一个版本只能传输超文本标记语言(HTML)文件，因此我们称之为超文本传输协议。它真的很简单，唯一可用的方法就是GET。它没有HTTP头文件或状态代码。如果出现问题，服务器可以使用带有错误描述的HTML文件进行响应。

1996年1.0版本出现了。与前一个版本相比，它进行了许多改进，其中最重要的是状态代码、POST和header等附加方法。现在，我们可以使用Content-Type头来传输普通HTML之外的文件。

1997年发布的HTTP/1.1引入了一些其它的改进。除了添加像OPTIONS这样的方法外，它还引入了Keep-Alive头。它允许一个连接对多个HTTP请求保持打开状态。因为这点，连接不必在每次请求之后关闭，然后再重新打开。在HTTP/1.1中，我们通常一次只能有6个连接。例如，如果其中一个请求由于服务器上的某些复杂逻辑而卡住，那么它们中的每一个都可以一次处理一个请求，整个连接就会冻结并等待响应。这个问题称为前端阻塞。

实现Node.js HTTP/2的好处

堆栈中有很多实现HTTP/2的方法。一种常见的方法可能是在web服务器上实现它，但是在本文中，我们在应用程序层中实现它，以便拓展Node.js的相关知识。因为浏览器不支持未加密的HTTP/2，这意味着我们需要通过HTTPS协议实现TLS连接。要在本地完成此操作，我们使用以下命令生成证书:

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out certificate.pem -days 365 -nodes

如果你想了解详细信息，请查看《使用OpenSSL证书实现HTTPS》

import * as http2 from 'http2';
import * as fs from 'fs';
import * as util from 'util';
 
const readFile = util.promisify(fs.readFile);
 
async function startServer() {
  const [key, cert] = await Promise.all([
    readFile('key.pem'),
    readFile('certificate.pem')
  ]);
  
  const server = http2.createSecureServer({ key, cert })
    .listen(8080, () => {
      console.log('Server started');
    });
 
  server.on('stream', (stream, headers) => {
    stream.respond({
      'content-type': 'text/html',
      ':status': 200
    });
    stream.end('<h1>Hello World</h1>');
  });
 
  server.on('error', (err) => console.error(err));
}
 
startServer();

解决某些复杂应用程序中的前端阻塞问题

即使使用HTTP/1.1进行6个并行连接也可能不够用，尤其是当我们遇到前端阻塞时。HTTP/2通过允许一个连接同时处理多个请求解决了这个问题，这是因为即使其中一个请求被卡住，其它的请求也可以继续。在上面的这个简单示例中，我们使用普通HTML进行响应。每当有人向我们的服务器发出请求时，流事件就会触发。

如果你想了解更多关于流的信息，请查看《可读流的暂停和流动模式》和《可写流、管道和流程流》

在headers参数中，我们有即将到来的请求的所有header。它是一种检查方法，比如请求的方法和路径。现在，由于我们使用HTTP/2，浏览器使用一个非阻塞的连接。一个可以关注的例子是Golang团队创建的一个网格演示。在使用HTTP/2时，由于在同一连接上处理并行请求和处理前端阻塞问题，你可以看到性能的显著提高。

报头压缩

HTTP/2使用了一种新的报头压缩算法，我们称之为HPACK。一些参与定义HTTP/2协议的开发人员也在开发SPDY，它以前也用于压缩报头。不幸的是，后来人们发现它容易受到CRIME攻击。HPACK不仅使整个过程更加安全，而且在某些情况下速度更快。

使用服务端推送缓存数据

当我们实现HTTP/2时，上面所有的改进都是开箱即用的。这并不是它全部的能力。通过服务器推送，我们现在可以在客户机缓存中填充数据。我们甚至可以在浏览器请求之前完成。一个基本的使用场景是当用户请求index.html文件时的情况。

server.on('stream', (stream, headers) => {
  const path = headers[":path"];
  switch(path) {
    case '/': {
      stream.respond({
        'content-type': 'text/html',
        ':status': 200
      });
      stream.end(` 
        <head>
          <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
          <h1>Hello World</h1>
        </body>
      `);
      break;
    }
    case '/style.css': {
      stream.respond({
        'content-type': 'text/css',
        ':status': 200
      });
      stream.end(`
        body {
          color: red;
        }
      `);
      break;
    }
    default: {
      stream.respond({
        ':status': 404
      });
      stream.end();
    }
  }
});

在上面的示例中，当用户访问主页时，它请求index.html文件。当它得到一个样式表时，它会注意到还需要style.css文件。在请求index.html和style.css之间有一些延迟，我们可以使用服务端推送来处理它。因为我们知道用户将需要style.css文件，所以可以将它与index.html一起发送。

server.on('stream', (stream, headers) => {
  const path = headers[":path"];
  switch(path) {
    case '/': {
      stream.pushStream({ ':path': '/style.css' }, (err, pushStream) => {
        if (err) throw err;
        pushStream.respond({
          'content-type': 'text/css',
          ':status': 200
        });
        pushStream.end(`
          body {
            color: red;
          }
        `);
      });
      stream.respond({
        'content-type': 'text/html',
        ':status': 200
      });
      stream.end(` 
        <head>
          <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
          <h1>Hello World</h1>
        </body>
      `);
      break;
    }
    case '/style.css': {
      stream.respond({
        'content-type': 'text/css',
        ':status': 200
      });
      stream.end(`
        body {
          color: red;
        }
      `);
      break;
    }
    default: {
      stream.respond({
        ':status': 404
      });
      stream.end();
    }
  }
});

现在使用 stream.pushStream只要有人请求index.html，我们就发送style.css文件。当浏览器处理它时，它会看到<link>标记，并注意到它还需要style.css文件。由于服务端推送，它已经缓存在浏览器中，因此不需要发送另一个请求。

总结

HTTP/2旨在通过满足日益复杂的web页面的需求来提高性能。我们使用HTTP协议发送的数据量增加了，HTTP/2通过处理前端阻塞等方法解决了这个问题。另外由于在同一连接上处理并行请求，这也解除了HTTP/1.1的一些限制。

英文原文：https://wanago.io/2019/07/15/node-js-typescript-benefits-http2-protocol/

创作场景

HTTP/2 协议的优点解析