HTTP/2都出来那么久了，你还在使用HTTP/1.1吗

发表于2022-02-25更新于2022-02-25

从HTTP/2的首个草案发布以来已经过去9年，网络上使用HTTP/2协议的web应用也逐渐增多。你们的Web应用也用上了HTTP/2了吗？
相比HTTP/1.1，HTTP/2具有非常多的等优点，能大大提升浏览器网页的加载速度。
现在就来一起学习并用上HTTP/2吧~

本文讲述的是HTTP/2的基础知识，大致的流程为：

  • HTTP/2 基础知识
  • node使用HTTP/2

HTTP/2 基础

HTTP2的前身是谷歌的SPDY，SPDY是谷歌开发的基于TCP的应用层协议，主要的目的是为了降低网页的加载时间。它主要通过多路复用，头部压缩，优先级来提高加载速度。下面就来一一介绍这些的功能是如何实现的吧~

多路复用

image.png

  • 多路复用的意思是：在一条信道上同时传输多路信息。
    在HTTP/1.1中提供了keep-alive来保持TCP链接，但是有一个问题，HTTP/1.1文件传输是按顺序的，即下一个文件传输之前必须等待前一个传送完成。所以keep-alive也只能减少TCP建立连接的时间。
    image.png

  • 从上面的图中可以看到有三个文件并发发起了请求，但是浏览器限制了HTTP/1.1的并发请求数(不同浏览器限制的并发数不一致，例如chrome限制的最大连接数为6)

  • 而HTTP/2使用的是二进制数据帧来传输。对多路复用请求的数据帧进行了标识，再接收数据帧后再按顺序排列重组，所以浏览器中一般不会限制HTTP/2的并发连接数，限制连接数就变为了服务端。HTTP/2传输文件的流程如下图。

image.png

image.png

头部压缩

除了多路复用，HTTP/2还进行了请求头压缩，以降低报文首部长度。头压缩使用的算法是HPack
头部压缩的基本原理是：

  • 浏览器和服务器共同维护一份静态表，标中包含了常见的头部信息和值的组合。静态表的定义
  • 除了维护一份静态表，还维护一份动态表，用来动态添加自定义或者静态表中没有的头部属性。
  • 表中压缩的值是使用HTTP/2标准的静态哈夫曼表来进行哈夫曼编码
  • 对于静态表的头部，因为接发双方都引入了这份静态表，只需要一个索引值就可以找到响应的头信息，对于动态表中的数据则使用哈夫曼编码减少体积。

服务点主动推送(Server Push)

HTTP/2还有一个重要功能就是服务端可以主动地推送数据到浏览器端。
在HTTP/1.1中请求资源必须由浏览器端发起，服务端响应并返回信息。如下图：
image.png
在HTTP/2中，只要浏览器端与服务端建立了连接，服务端就可以主动将数据推送到客户端。

image.png

HTTP/2弊端

虽然HTTP/2由很多优点，可以提高加载速度，但是HTTP/2并不是完美的~HTTP/2也有缺点：

  • 没有解决队头阻塞的问题：因为HTTP/2是基于传输控制协议TCP的，TCP为了保证报文可靠传输，有一个报文重传机制，当HTTP出现丢包时，整个TCP都需要等待报文的重传，如果有很多报文需要传输时，就会造成阻塞。
  • 多路复用会导致服务器的压力上升，服务器带宽有限，并且容易导致请求超时

node开启HTTP/2

了解完HTTP2的基本概念，下面就来实战一下：用node开启一个http/2服务
要用node开发HTTP/2服务很简单，node中自带了http2的库，使用它就能轻松创建HTTP/2服务。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const http2 = require('http2');
const path = require('path');
const fs = require('fs');

const app = http2.createServer(
  {
    key: fs.readFileSync(path.resolve(__dirname, 'example.com.key')),
    cert: fs.readFileSync(path.resolve(__dirname, 'example.com.crt')),
  },
  (req, res) => {
    res.end('hello http2');
  }
);

app.listen('8080', () => {
  console.log('http2 server running at 8080');
});

访问https://localhost:8080 可以看到HTTP/2服务以及开启啦！
image.png

总结

本文主要介绍了HTTP/2的基础知识和node是如何创建HTTP/2服务的。

其中，HTTP/2主要的优点有：

  • 多路复用
  • 头部压缩，缩小报文首部大小
  • 服务端可以主动推送信息给客户端
    等等

HTTP/2的缺点：

  • 没有解决队头阻塞的问题
  • 不限制并发量可能会增加服务器压力