前端应该了解的HTTP2
Node.js
Youwei
前端Leader
1人收藏 697次学习

前端应该了解的HTTP2

影响一个网络请求的因素主要有两个,带宽和延迟。今天,大部分时候都是延迟在影响响应速度。

What's HTTP

From wikipedia

超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是互联网上应用最为广泛的一种网络协议。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。通过HTTP或者HTTPS协议请求的资源由统一资源标识符(Uniform Resource Identifiers,URI)来标识。

What's HTTP2

From wikipedia

HTTP/2(超文本传输协议第2版,最初命名为HTTP 2.0),是HTTP协议的的第二个主要版本,使用于万维网。HTTP/2是HTTP协议自1999年HTTP 1.1发布后的首个更新,主要基于SPDY协议。它由互联网工程任务组(IETF)的Hypertext Transfer Protocol Bis(httpbis)工作小组进行开发。该组织于2014年12月将HTTP/2标准提议递交至IESG进行讨论,于2015年2月17日被批准。HTTP/2标准于2015年5月以RFC 7540正式发表。

What's SPDY

From wikipedia

SPDY(发音如英语:speedy),一种开放的网络传输协议,由Google开发,用来发送网页内容。基于传输控制协议(TCP)的应用层协议 。Google最早是在Chromium中提出的SPDY协议。目前已经被用于Google Chrome浏览器中来访问Google的SSL加密服务。SPDY并不是首字母缩略字,而仅仅是"speedy"的缩写。SPDY现为Google的商标。

SPDY当前并不是一个标准协议,但SPDY的开发组已经开始推动SPDY成为正式标准(现为互联网草案,HTTP/2主要以SPDY技术为主。Google Chrome,Mozilla Firefox,Opera和Internet Explorer[]均已支持SPDY协议。SPDY协议类似于HTTP,但旨在缩短网页的加载时间和提高安全性。SPDY协议通过压缩、多路复用和优先级来缩短加载时间。

Why HTTP2


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

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

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

HTTP1.0 -> HTTP1.1

不过pipelining并不是救世主,它也存在不少缺陷:

pipelining只能适用于http1.1,一般来说,支持http1.1的server都要求支持pipelining

只有幂等的请求(GET,HEAD)能使用pipelining,非幂等请求比如POST不能使用,因为请求之间可能会存在先后依赖关系。

head of line blocking并没有完全得到解决,server的response还是要求依次返回,遵循FIFO(first in first out)原则。也就是说如果请求1的response没有回来,2,3,4,5的response也不会被送回来。

绝大部分的http代理服务器不支持pipelining。

和不支持pipelining的老服务器协商有问题。

可能会导致新的Front of queue blocking问题。

HTTP2 VS HTTP1.1

多路复用
多路复用通过多个请求stream共享一个tcp连接的方式,解决了http1.x holb(head of line blocking)的问题,降低了延迟同时提高了带宽的利用率。

压缩头部
HTTP/2.0规定了在客户端和服务器端会使用并且维护「首部表」来跟踪和存储之前发送的键值对,对于相同的头部,不必再通过请求发送,只需发送一次 事实上,如果请求中不包含首部(例如对同一资源的轮询请求),那么首部开销就是零字节。此时所有首部都自动使用之前请求发送的首部。 如果首部发生变化了,那么只需要发送变化了数据在Headers帧里面,新增或修改的首部帧会被追加到“首部表”。首部表在 HTTP2.0的连接存续期内始终存在,由客户端和服务器共同渐进地更新。

二进制分帧
在应用层与传输层之间增加一个二进制分帧层,以此达到“在不改动HTTP的语义,HTTP 方法、状态码、URI及首部字段的情况下,突破HTTP1.1的性能限制,改进传输性能,实现低延迟和高吞吐量。”

在二进制分帧层上,HTTP2.0会将所有传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码,其中HTTP1.x的首部信息会被封装到Headers帧,而我们的request body则封装到Data帧里面。

客户端和服务器可以把HTTP消息分解为互不依赖的帧,然后乱序发送,最后再在另一端把它们重新组合起来。注意,同一链接上有多个不同方向的数据流在传输。客户端可以一边乱序发送stream,也可以一边接收者服务器的响应,而服务器那端同理。

请求优先级
多路复用导致所有资源都是并行发送,那么就需要「优先级」的概念了,这样就可以对重要的文件进行先传输,加速页面的渲染。

服务器推送
服务器推送是指在客户端请求之前发送数据的机制。

另外有一点值得注意的是,客户端如果退出某个业务场景,出于流量或者其它因素需要取消server push,也可以通过发送RST_STREAM类型的frame来做到。

HTTP2 实践

这里使用 Node.js 作为服务器端语言。

1. 生成TLS证书

如果想要在生产环境中使用HTTP2,那么你可以去这里生成一个证书。

如果你仅仅开发环境使用,那么我们可以自己生成一个自签名的TSL证书。

1. 安装OpenSSH2. 使用OpenSSH生成私钥

openssl genrsa -des3 -passout pass:1234 -out server.pass.key 2048

这里 1234 为私钥密码,如果你不想使用密码,则可以去除私钥密码,敲入如下密令:

openssl rsa -passin pass:x -in server.pass.key -out server.key

3. 创建 证书签名请求

这里使用无密码私钥,如果使用带密码私钥,只需将server.key更换为server.pass.key即可,密令如下

openssl req -new -key server.key -out server.csr

4. 创建证书

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

通过以上四个步骤,我们得到了三个文件

  1. server.key 你的TSL证书私钥
  2. server.csr 你的TSL证书签名请求
  3. server.crt 你的TSL证书

2. 使用Node.js 创建服务器安装node-http2模块

npm install http2

创建服务器

var options = {
  key: fs.readFileSync('./server.key'),
  cert: fs.readFileSync('./server.crt')
};

require('http2').createServer(options, function(request, response) {
  response.end('Hello world!');
}).listen(8080);

启动服务器

node index.js

使用浏览器访问

http://localhost:8080

到此,一个简单的Demo就完成了。

Demo源码下载

点击这里访问完整Demo

https://github.com/zhanyouwei/HTTP2-NodeJS-Demo

测试结果对比

通过上面两张截图可以发现,使用了HTTP2后,同样的请求,在数据传输大小与速度上都有非常大的提升,几乎可以预见,不久的将来,HTTP2将会大放异彩。

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
Node.js