Node.js学习教程之HTTP/2服务器推送【译】

前言

最近Node.js v8.4+版本发布带来了体验版的HTTP/2，你可以自己通过设置参数--expose-http2启动。

这篇文章，我将介绍HTTP/2最重要的一方面服务器推送并且创建一个小的Node.js程序案例来使用它。下面话不多说了，来一起看看详细的介绍吧。

关于HTTP/2

HTTP/2 的目的是通过支持完整的请求与响应复用来减少延迟，通过有效压缩 HTTP 标头字段将协议开销降至最低，同时增加对请求优先级和服务器推送的支持。

更多关于HTTP/2内容，请查看文章HTTP/2。

服务器推送

HTTP/2 服务器推送（Server Push）允许服务器在浏览器请求之前将资源发送到浏览器。

在我们转到HTTP/2之前，我们来看看它如何与HTTP/1配合使用：

在HTTP/1中，客户端向服务器发送一个请求，服务器返回一个包含许多外部资源（.js，.css等文件）链接的HTML文件。当浏览器处理这个初始HTML文件时，它开始解析这些链接，并分别加载它们。

查看下面的demo加载过程的图像。 请注意时间表上的独立请求以及这些请求的启动：

HTTP/1资源加载

这是HTTP/1的工作原理，这就是我们如何开发这么多年的应用程序。为什么要改变它呢？

当前方法的问题是用户必须等待浏览器解析响应，发现链接并获取资源。 这会延迟渲染并增加加载时间。 有一些解决方案，如内联一些资源，但也使得初始响应越来越大。

这是HTTP/2服务器推送功能进入视线的地方，因为服务器可以在浏览器请求之前将资源发送到浏览器。
看看下面的图片，通过HTTP/2提供相同服务的网站。查看时间轴和启动器。 你可以看到HTTP/2复用减少了请求数量，并且资源与初始请求一起立即发送。

HTTP/2服务器推送

让我们看看今天如何在Node.js中使用HTTP/2服务器推送，来加快客户端的加载时间。

一个Node.js HTTP/2服务器推送案例

通过加载内置的http2模块，我们可以创建我们的服务器，就像我们使用https模块一样。

有趣的部分是在请求index.html时推送其他资源：

const http2 = require('http2')
const server = http2.createSecureServer(
 { cert, key },
 onRequest
)

function push (stream, filePath) {
 const { file, headers } = getFile(filePath)
 const pushHeaders = { [HTTP2_HEADER_PATH]: filePath }

 stream.pushStream(pushHeaders, (pushStream) => {
 pushStream.respondWithFD(file, headers)
 })
}

function onRequest (req, res) {
 // Push files with index.html
 if (reqPath === '/index.html') {
 push(res.stream, 'bundle1.js')
 push(res.stream, 'bundle2.js')
 }

 // Serve file
 res.stream.respondWithFD(file.fileDescriptor, file.headers)
}

这样bundle1.js和bundle2.js资源即使在它要求它们之前也会被发送到浏览器。

你可以查看完整的案例：https://github.com/RisingStack/http2-push-example

HTTP/2 & Node

HTTP/2可以帮助我们在很多方面优化我们的客户端与服务器之间的通信。

通过服务器推送，我们可以将资源发送到浏览器，减少用户的初始加载时间。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

原文：https://blog.risingstack.com/node-js-http-2-push/

译者：Jin

作者：Péter Márton

赞 (0)

相关推荐

  • Node.js实现数据推送

    Node.js实现数据推送

    场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的方式处理Ajax请求并返回数据,在学校的时候实验室的项目一直都采用轮询,因为它最保险也最容易实现.但轮询带来的通信资源的浪费是无法忽视的,无论数据是否改变,都照常发送请求并响应,而且每次HTTP请求都带有很长的头部信息. 2. Comet的概念是长连接,客户端发送请求后,后端将连接保持下来,直到连接超时

  • vue使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务,这个服务还可以与开发的语言无关,客户端既可以是安卓也可以是ios,也可以是java或者c#,python等.闲话不多扯,这里只是实现了在vue中使用mqtt的js客户端,后台用.net WEB API用的是c#的mqtt客户端 第一步:安装依赖 np

  • ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知的示例代码

    ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知的示例代码

    一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据. 2.Push.js是什么?[需要浏览器支持H5Notifications] Notifications翻译过来即是通知.那么Push.js的通知又是什么样的,见下图:大多数在屏幕的右下角出

  • 使用 Javascript 实现浏览器推送提醒功能的示例

    本篇文章内容简单,速读只需两三分钟,通过这两三分钟的时间你就可以给自己的网站实现推送提醒的功能 Notification 类 简单明了,这个类就是负责推送消息的,只要用户当前没有关闭页面,及时是在使用其他程序,浏览器也能够将消息推送给用户 请求权限 我们在手机上都收到过消息推送,在接收推送之前我们会先将消息推送权限开放给应用.在浏览器中也一样,在使用浏览器推送之前,需要先获取权限 Notification.requestPermission().then(permission => { cons

  • JavaScript数据推送Comet技术详解

    JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式 Comet:基于 HTTP 长连接的服务器推送技术 本课时介绍Comet:基于 HTTP 长连接的服务

  • Node.js学习教程之HTTP/2服务器推送【译】

    Node.js学习教程之HTTP/2服务器推送【译】

    前言 最近Node.js v8.4+版本发布带来了体验版的HTTP/2,你可以自己通过设置参数--expose-http2启动. 这篇文章,我将介绍HTTP/2最重要的一方面服务器推送并且创建一个小的Node.js程序案例来使用它.下面话不多说了,来一起看看详细的介绍吧. 关于HTTP/2 HTTP/2 的目的是通过支持完整的请求与响应复用来减少延迟,通过有效压缩 HTTP 标头字段将协议开销降至最低,同时增加对请求优先级和服务器推送的支持. 更多关于HTTP/2内容,请查看文章HTTP/2.

  • Node.js学习教程之Module模块

    Node.js学习教程之Module模块

    前言 采用了 Commonjs 规范,通过 module.exports.require 来导出和导入模块.模块加载机制中,采用了延迟加载的策略.就是说在用到的情况下,系统模块才会被加载,等加载完成后会放到 binding_cache 中. 分类(模块类型) 系统模块 核心模块(native 模块),http.buffer.fs 等,底层调用的内建模块 (C/C++): C/C++ 模块(built-in 内建模块),供 native 模块调用: 第三方模块 第三方维护的模块,比如 expres

  • 从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析

    从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析

    本文实例讲述了Node.js中SQLite3和MongoDB的用法.分享给大家供大家参考,具体如下: setup.js:初始化数据库 var util = require('util'); var async = require('async'); //npm install async var notesdb = require('./nodesdb-sqlite3'); // var notesdb = require('./notesdb-mongoose'); notesdb.conne

  • node.js入门教程之querystring模块的使用方法

    querystring模块 querystring从字面上的意思就是查询字符串,一般是对http请求所带的数据进行解析.querystring模块只提供4个方法,在我看来,这4个方法是相对应的. 这4个方法分别是querystring.parse和querystring.stringify,querystring.escape和querystring.unescape. 首先,使用querystring模块之前,需要require进来: const querystring = require("

  • WebGL学习教程之Three.js学习笔记(第一篇)

    webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染. WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏. 原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实现起来比较复杂,需要一定的数学基础,但更多的是需要学习

  • 教你用Node.js与Express建立一个GraphQL服务器

    目录 前言 GraphQL服务器配置设置 定义模式 嘲弄我们的数据 定义解析器 定义突变 总结 前言 在这篇文章中,我们将对使用Node.js和Express建立GraphQL服务器的整个过程进行演练.我们将使用 Express 的中间件库express-graphql 来协助我们完成这一过程. 如果你还不熟悉GraphQL以及我们使用它的目的,请务必查看这篇文章,我们将深入了解GraphQL是什么以及为什么我们应该在我们的应用程序中使用它. 如果你已经熟悉它了,你可能想看看这篇文章,在这篇文章

  • Node.js学习之TCP/IP数据通讯(实例讲解)

    Node.js学习之TCP/IP数据通讯(实例讲解)

    1.使用net模块实现基于TCP的数据通讯 提供了一个net模块,专用于实现TCP服务器与TCP客户端之间的通信 1.1创建TCP服务器 在Node.js利用net模块创建TCP服务器 var server = net.createServer([options],[connectionListener]) //options:false当TCP服务器接收到客户端发送的一个FIN包时将会回发一个FIN包 true当TCP服务器接收到客户端发送的一个FIN包时将不会回发FIN包,这使得TCP服务器

  • jQuery插件学习教程之SlidesJs轮播+Validation验证

    SlidesJs(轮播支持触屏)--官网(http://slidesjs.com) 1.简介 SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件.支持键盘,触摸,css3转换. 2.代码 <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http:/

  • 详解把Node.js项目部署到阿里云服务器（CentOs）

    详解把Node.js项目部署到阿里云服务器（CentOs）

    最近用node.js开发了一个web项目,开发完打算先部署到我自己买的阿里云学生服务器上,让客户先试用下网站.不知道如何把node.js项目部署到阿里云服务器,在问了飞哥哥之后,在网上找了下教程,部署成功.把教程整合了一下,做下分享. 服务器 服务器选择了阿里云学生服务器:9.92一个月,适合用来个人开发测试. 配置: 系统:CentOS6.5 64位(Linux系统的一种) 配置环境配置服务器环境 1.在阿里云管理控制台把云服务器实例启动 2.登入服务器:用Putty 或 Xshell(我使用

  • PHP内核学习教程之php opcode内核实现

    opcode是计算机指令中的一部分,用于指定要执行的操作, 指令的格式和规范由处理器的指令规范指定. 除了指令本身以外通常还有指令所需要的操作数,可能有的指令不需要显式的操作数. 这些操作数可能是寄存器中的值,堆栈中的值,某块内存的值或者IO端口中的值等等. 通常opcode还有另一种称谓:字节码(byte codes). 例如Java虚拟机(JVM),.NET的通用中间语言(CIL: Common Intermeditate Language)等等. 1. Opcode简介 opcode是计算

随机推荐