专栏名称: Fundebug
Fundebug为JavaScript、微信小程序及Node.js开发团队提供专业的线上代码bug监控和智能分析服务。
目录
相关文章推荐
前端大全  ·  10年了,开发人员仍然不明白 ... ·  昨天  
前端早读课  ·  【第3454期】如何用语音学习编程的 ·  2 天前  
前端大全  ·  前端行情变了,差别真的挺大。。。 ·  3 天前  
前端早读课  ·  【开源】TinyEngine开启新篇章,服务 ... ·  3 天前  
51好读  ›  专栏  ›  Fundebug

Node.js之HTTP\/2服务器推送

Fundebug  · 公众号  · 前端  · 2018-03-28 09:22

正文

译者按: 盆友们,是时候拥抱新一代HTTP协议了!

  • 译者:Fundebug

  • 原文:HTTP/2 Server Push with Node.js

Node.js 8.4.0已经开始支持HTTP/2,执行node命令时,加上 --expose-http2 选项就可以使用了。

在这篇博客中,我们会介绍如何使用HTTP/2进行 服务器推送(server push) ,另外,我们还写了一个简单的Node.js示例。

关于HTTP/2

HTTP/2是新一代HTTP协议,支持 多路复用(MultiPlexing)、header压缩、服务器推送(server push) 等特性,有效减少了时延。对HTTP/2感兴趣的话,可以查看 Introduction to HTTP/2。

HTTP/1 VS HTTP/2

HTTP/2服务器推送允许服务器在浏览器请求资源之前推送资源,减少页面加载时间。这里,我们不妨对比一下HTTP/1和HTTP/2。

HTTP/1

客户端发送请求给服务器,服务器返回请求的资源,通常是HTML文件,HTML文件包含一些资源链接(比如.js, .css等)。浏览器解析HTML文件,获取资源链接,然后分别请求这些资源。

下面的图片展示了这个过程,注意:timeline中有3个独立的请求,bundle1.js和bundle2.js的请求的initiator是(index)Parser。



HTTP/1是这样工作的,我们已经这样做很多年了,那为什么要改变呢?问题在于,用户需要等待浏览器解析HTML文件,获取链接然后请求资源。这会延缓前端渲染,增加页面加载时间。将一些资源嵌入HTML是一个解决方法,但是那会使得第一次请求变得很大很慢。

HTTP/2

下面的图片显示了当服务器启用HTTP/2之后的网站加载过程。由timeline和initiator可知,多路复用减少了请求个数,而且bundle1.js和bundle2.js在第一次请求时就推送给前端了。



Node.js示例

使用内置的http2模块,我们可以创建一个http2服务器。有趣的一点在于,当 index.html 被请求时,我们会主动推送其他资源:bundle1.js和bundle2.js。这样的话,bundle1.js和bundle2.js可以在浏览器请求它们之前就推送过去了。

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'






请到「今天看啥」查看全文