概述
接着浏览器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 到浏览器:
需要注意点有三个:
- h2基于https, 需要使用 http2.createSecureServer, 而不是 http2.createServer
- 使用 stream 提供的 pusehStream 方法主动推送js文件,同时需要设置其
content-type
属性 - http2的stream提供了responseWithFile方法,基于相对路径可以较方便的返回文件内容
总结
使用 h2 的 server push能力,可以主动推送静态资源,虽然基于当前基于cdn方式的静态资源加载方案没有什么用处,如果某一天cdn支持server push呢? 当然如果主文档会依赖一些后端数据,也可以使用 server push 进行推送,一定程度可以有效的提升性能。