前端应该了解的HTTP2

leo108 发布于2019-08-19 18:17 / 1526人阅读

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

欢迎一起交流

欢迎关注我的个人公众号，不定期更新自己的工作心得。

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证书。

安装OpenSSH

使用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

创建证书签名请求
这里使用无密码私钥，如果使用带密码私钥，只需将server.key更换为server.pass.key即可，密令如下

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

创建证书

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

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

server.key 你的TSL证书私钥

server.csr 你的TSL证书签名请求

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后，同样的请求，在数据传输大小与速度上都有非常大的提升，几乎可以预见，不久的将来，HTTP2将会大放异彩。

云服务器 GPU云服务器深度学习的了解对大数据的了解了解域名的注册过程 json的对象了解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79421.html

前端系列——nodejs环境下http2初尝试

摘要：基础理论是二进制协议这是一个复用协议。使用现状案例淘宝案例京东案例知乎案例二月的公司不好意思，我们还没用上这么牛逼的协议。本文内容很浅，想要了解更多的知识，可以去知乎搜相关文章和回答。目的 http2出来也有段时间了，很多网站都已经实际应用了它，而我还活在http1.1的时代，趁着还年轻，记性还行，花点时间研究了http2在nodejs中的使用。 http2基础理论 HTTP2是二...

bigdevil_s 2019-08-26 11:38 评论0 收藏0
前端基本功-常见概念(一)

摘要：前端基本功常见概念一点这里前端基本功常见概念二点这里前端基本功常见概念三点这里什么是原型链当一个引用类型继承另一个引用类型的属性和方法时候就会产生一个原型链。函数式编程是声明式而不是命令式，并且应用程序状态通过纯函数流转。前端基本功-常见概念(一) 点这里前端基本功-常见概念(二) 点这里前端基本功-常见概念(三) 点这里 1.什么是原型链当一个引用类型继承另一个引用类型的属性和方...

bladefury 2019-08-23 14:41 评论0 收藏0
面试必考之http状态码有哪些

摘要：背景状态码有哪些，这也是一个很高频的面试问题。总结仅仅三个状态码，都可以牵涉到如此丰富的知识，对于状态码，我们不能只是片面的去背诵状态码及对应的含义，要去主动挖掘，深入，借助状态码来建立自己的网络体系。背景 http状态码有哪些，这也是一个很高频的面试问题。一般大家都知道404页面不存在，500服务器错误，301重定向，302临时重定向，200ok，401未授权啥的。如果只是简单的...

wing324 2019-08-26 11:50 评论0 收藏0