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


Posted in Javascript onOctober 31, 2017

前言

最近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加载过程的图像。 请注意时间表上的独立请求以及这些请求的启动:

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

HTTP/1资源加载

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

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

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

Node.js学习教程之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

Javascript 相关文章推荐
jquery制作select列表双向选择示例代码
Sep 02 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
详解http访问解析流程原理
Oct 18 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 #Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 #Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 #Javascript
Vue实战之vue登录验证的实现代码
Oct 31 #Javascript
jQuery ajax读取本地json文件的实例
Oct 31 #jQuery
ES6解构赋值的功能与用途实例分析
Oct 31 #Javascript
js原生日历的实例(推荐)
Oct 31 #Javascript
You might like
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
Javascript 类型转换方法
2010/10/24 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
详解vuejs之v-for列表渲染
2017/06/22 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
销售顾问的岗位职责
2013/11/13 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
触摸春天教学反思
2014/02/03 职场文书
西式结婚主持词
2014/03/14 职场文书
超市理货员岗位职责
2014/07/04 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
防暑降温通知书
2015/04/27 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
python实现调用摄像头并拍照发邮箱
2021/04/27 Python