PCon全球产品创新大会最新日程一览,这里直达 了解详情
写点什么

HTTP/2 协议的优点解析

  • 2019 年 7 月 21 日
  • 本文字数:2867 字

    阅读完需:约 9 分钟

HTTP/2协议的优点解析


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/


2019 年 7 月 21 日 15:117119

评论

发布
暂无评论
发现更多内容

Dig101-Go之for-range排坑指南

newbmiao

Go 语言

ANTLR入门(一)

zane

编程语言 ANTLR

彻底明白如何设计一个良好的 API

Yezhiwei

如何批量将Word表格转为Excel

newbmiao

自动化 工具

游戏夜读 | 设计师的数据模型

game1night

读 Guide to Java String Pool

shengjk1

Java string pool

SpringBoot+Mybatis Plus多租户动态数据源

zane

数据库 Spring Cloud mybatis

Filebeat + Kafka + Elasticsearch + Kibana 实现日志收集与管理

AlwaysBeta

大数据 kafka elasticsearch elastic 数据分析

字节码编程,Javassist篇二《定义属性以及创建方法时多种入参和出参类型的使用》

小傅哥

Java 字节码编程 字节码插桩 小傅哥

本地开发环境搭建利器--vagrant

aoho

DevOps 运维 vagrant

Redis高可用-哨兵模式配置

for

redis 高可用 主从配置 redis高可用 redis哨兵模式

从少儿编程讲讲开发行业的大趋势

kimmking

在线教育 少儿编程

曾国藩家书嘉言钞(六)

熊小北同学

曾国藩 曾国藩家书 嘉言钞

DDD 实践手册(1.Get Started)

Joshua

领域驱动设计 DDD 系统架构 架构模式

招聘小思考

水色

程序员到底应该学习什么语言好?

页面仔小杨

远程办公钉钉使用体验

冯夷

钉钉

ANTLR 入门(二)

zane

编程语言 ANTLR

从高盛的技术“开源”看金融业软件发展未来

Edd

open-source 金融科技 数字化生态

告诉你一个学习编程的诀窍(建议收藏)

ithuangqing

学习 编程 自学编程

字节码编程,Javassist篇一《基于javassist的第一个案例helloworld》

小傅哥

Java 字节码编程 字节码插桩 小傅哥

云原生时代的通用策略引擎:OpenPolicyAgent入门系列

newbmiao

微服务 云原生 k8s 工具 Go 语言

如何优雅的使用GDB调试Go

newbmiao

Docker debug gdb Go 语言

说说最近升级protobuf-go的一些坑

newbmiao

gRPC proto-buf protoc-gen-go Go 语言

spring-cloud-stream 集成 rocketmq

再见孙悟空

RocketMQ Spring Cloud

100字:对数时间复杂度

韩小非

算法 时间复杂度

Netty 源码解析(三): Netty 的 Future 和 Promise

猿灯塔

高性能交易系统设计原理

廖雪峰

架构

程序员不可不知的:2020年测试六大趋势

禅道项目管理

人工智能 开源 DevOps 敏捷开发 测试

变革之路的思考

龙眼果

JDK源码分析之 ArrayList

Wh1

源码分析

HTTP/2协议的优点解析-InfoQ