Node 之 Http2 Server push

193 阅读2分钟

概述

接着浏览器ES6模块加载, 浏览器支持ES6加载,使用import语法加载模块时,需要经过网络请求从服务器下载 js 文件,当我们下载主文档时,其实已经知道依赖哪些模块,结合 H2 的 Server Push 能力提前下发依赖的模块文件,在一定程度上可以改善页面的性能(目前无实际线上的使用,性能提升数据未知)。相关demo代码,如果跑demo,可以看 readme。

示例

先上一个使用Server Push的示例: 可以看到请求的资源都使用 h2 协议,同时 js 文件都时push类型: 附上一张未使用server push的js加载截图:

实操

浏览器上使用http2协议都需要基于https,故本地使用时也需要先使用openssl生成相关证书:

openssl req -x509 -newkey rsa:2048 -nodes -sha256 -subj '/CN=localhost'  -keyout localhost-privkey.pem -out localhost-cert.pem

然后使用 Node 提供的 http2 模块实现一个静态资源服务,检测到访问主文档时,将主文档依赖的 js 文件主动 push 到浏览器: 需要注意点有三个:

  1. h2基于https, 需要使用 http2.createSecureServer, 而不是 http2.createServer
  2. 使用 stream 提供的 pusehStream 方法主动推送js文件,同时需要设置其 content-type 属性
  3. http2的stream提供了responseWithFile方法,基于相对路径可以较方便的返回文件内容

总结

使用 h2 的 server push能力,可以主动推送静态资源,虽然基于当前基于cdn方式的静态资源加载方案没有什么用处,如果某一天cdn支持server push呢? 当然如果主文档会依赖一些后端数据,也可以使用 server push 进行推送,一定程度可以有效的提升性能。