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 相关文章推荐
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
JS array数组检测方式解析
May 19 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数据缓存的使用说明
2013/05/10 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Python 中的lambda函数介绍
2018/10/10 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python partial函数原理及用法解析
2019/12/11 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
专升本自我鉴定
2013/10/10 职场文书
参观接待方案
2014/03/17 职场文书
努力学习演讲稿
2014/05/10 职场文书
图书室标语
2014/06/21 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
数学教师求职信范文
2015/03/20 职场文书