提前锁票 InfoQ 最具价值感的视频栏目 | InfoQ 大咖说 了解详情
写点什么

HTTP/2 协议的优点解析

2019 年 7 月 21 日

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:116694

评论

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

解读登录双因子认证(MFA)特性背后的TOTP原理

华为云开发者社区

算法 totp 密钥

为什么容器内存占用居高不下,频频 OOM

996小迁

Java 架构 容器 面试 k8s

区块链IM即时社交通讯系统开发,区块链社交平台源码搭建

13530558032

vscode + vim : vscode 全键盘使用方案

lmymirror

vim vscode Spacemacs

C++调用Go方法的字符串传递问题及解决方案

华为云开发者社区

c++ 内存 代码

数字货币交易所开发源码,币币撮合交易系统搭建

WX13823153201

渣本全力以赴33天,四面阿里妈妈(淘宝联盟),拿下实习岗offer

小Q

Java 学习 编程 架构 面试

史上最通俗Netty入门长文:基本介绍、环境搭建、动手实战

JackJiang

网络编程 Netty nio 即时通讯 IM

奋力准备一个月成功进字节,来看一下我都看了哪些资料做了哪些准备

小Q

学习 编程 程序员 架构 面试

《程序员面试金典》.pdf

田维常

面试

影视剪辑类自媒体运营心得:如何抓住观众的痛点

石头IT视角

这才是图文并茂:我写了1万多字,就是为了让你了解AQS是怎么运行的

鄙人薛某

Java 并发编程 AQS 并发 ReentrantLock

接口测试并不只是测试参数和返回值

测试人生路

接口测试

【应用运维】公司业务迭代迅速,运维如何高效进行应用发布?

嘉为蓝鲸

可视化 PaaS 运维自动化 部署与维护 发布

惊喜!Alibaba架构师终于发布“微服务架构与实践”文档

Crud的程序员

架构 微服务

什么是服务器租用?

德胜网络-阳

Java中NullPointerException的完美解决方案

Silently9527

java8 Optional

6个JDK自带JVM调优工具,一次性打包给你说清楚

田维常

jvm调优

微服务架构中的“参天大树”:SpringBoot+SpringCloud+Docker

小Q

Java 学习 容器 面试 微服务

区块链币支付系统开发搭建,USDT支付平台源码

13530558032

.net core增强工作流组件,基于稳定平台,多项目整合开发

雯雯写代码

2020年底备战—从技术到面试合集

iOSer

ios 编程 面试题 大厂面试 面试题总结

区块链交易所软件,数字货币场外交易系统搭建

13530558032

容器和虚拟机到底有啥区别?

网管

容器 虚拟机 容器化

SpringBoot-技术专题-Hystrix学习介绍

李浩宇/Alex

go-zero 如何扛住流量冲击(一)

Kevin Wan

go microservice go-zero goctl

这4个Java异常框架,很多人竟然还不知道

比伯

Java 编程 架构 面试 计算机

支撑2715​亿元海量订单 揭秘京东大促背后的数据库基石

京东科技开发者

数据库 数据仓库 云服务 云数据库

深圳区块链钱包系统开发,区块链钱包app源码

13530558032

K3d vs Kind 谁更适合本地研发

郭旭东

Kubernetes k3s kind

基于Vue实现一个有点意思的拼拼乐小游戏

徐小夕

Java GitHub H5游戏 H5 游戏开源

打造 VUCA 时代的 10 倍速 IT 团队

打造 VUCA 时代的 10 倍速 IT 团队

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