腾讯由于有微信小程序等需要快速打开 H5 的场景,因此加速 H5 首屏打开效率就成了研发的重任。根据这两天腾讯发布的 VasSonic 来看,打开的效率确实提高了不少。本文将结合nodejs来对 VasSonic 框架进行对接。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
VasSonic 配合node.js,需要依赖 nodejs 的版本等信息。具体看下面的 3 条依赖:
- nodejs 的节点版本> 7.0。因为代码中使用了 async/await 语法。
- 安装 sonic_differ 模块
- 导入 sonic_differ 模块
安装 sonic_differ 模块
npm install sonic_differ --save
导入 sonic_differ 模块
const differ = require('sonic_differ');
在 Sonic 模式下从服务器截取和处理数据。
首先,像下面的代码一样创建一个 Sonic 缓存结构。
let sonic = { buffer: [], write: function (chunk, encoding) { let buffer = chunk; let ecode = encoding || 'utf8'; if (!Buffer.isBuffer(chunk)) { buffer = new Buffer(chunk, ecode); } sonic.buffer.push(buffer); } };
在从服务器截取数据并使用 sonic_differ 模块进行处理
response.on('data', (chunk, encoding) => { sonic.write(chunk, encoding) }); response.on('end', () => { let result = differ(ctx, Buffer.concat(sonic.buffer)); sonic.buffer = []; if (result.cache) { //304 Not Modified, return nothing. return '' } else { //www.lisa33xiaoq.net other Sonic status. return result.data } });
前端如何使用
这里是一个简单的演示,演示如何使用 Sonic 为前端。
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>web 前端中文站 Sonic php 实例:www.lisa33xiaoq.net</title> <script type="text/javascript"> //通过 JavaScript 界面与移动客户端进行交互以获取 Sonic 差异数据。 function getDiffData(){ window.sonic.getDiffData(); } //步骤 3:处理来自移动客户端的响应,包括 Sonic 响应代码和差异数据。 function getDiffDataCallback(result){ var sonicStatus = 0; /** *声音状态:* 0:无法从手机客户端获取任何数据。* 1:手机客户端首次使用 Sonic。 /* 2:移动客户端重新加载整个网站。* 3:网站将通过本地刷新动态更新。*/ /* 4:移动客户端的 Sonic 请求收到 304 响应代码,没有任何修改。 * / sonicUpdateData = {}; var result = JSON.parse(result); if(result['code'] == 200){ sonicStatus = 3; sonicUpdateData = JSON.parse(result['result']);} else if (result['code'] == 1000) { sonicStatus = 1;} else if (result['code'] == 2000) { sonicStatus = 2; } else if(result['code'] == 304) { sonicStatus = 4; } handleSonicDiffData(sonicStatus, sonicUpdateData);} //步骤 3:处理来自移动客户端的响应,包括 Sonic 响应代码和差异数据。 function handleSonicDiffData(sonicStatus, sonicUpdateData){ if(sonicStatus == 3){ //网站将被动态更新,并在本地刷新模式下运行一些 JavaScript。 var html = ''; var id = ''; var elementObj = ''; for(var key in sonicUpdateData){ id = key.substring(1,key.length-1); html = sonicUpdateData[key]; elementObj = document.getElementById(id+'Content'); elementObj.innerHTML = html;}}}</script> </head> <body> <html> <head></head> <body>//web 前端中文站 //步骤 1:通过插入不同的注释锚来指定模板和数据。 <div id="data1Content"> <!--sonicdiff-data1--> <p id="partialRefresh"></p> <!--sonicdiff-data1-end--> </div> <div id="data2Content"> <!--sonicdiff-data2--> <p id="data2">here is the data</p> <!--sonicdiff-data2-end--> <p id="pageRefresh"></p> </div> <div id="data3">data3</div> //步骤 2:通过 Javascript 界面从移动客户端接收 diff 数据。 <script type="text/javascript"> window.function(){ getDiffData(); } </script> </body> </html>
上面的前端用法和 php 对接Hybrid 框架VasSonic 教程是一样的。
相关参考
有关node.js下 Koa 的学习有一个系列的学习教程,大家可以参考着以下资料,循序渐进地掌握Koa 框架知识。
4.NODE.JS KOA 框架 的 COOKIES、表单、文件上传功能详解;
6.闲谈 NODE.JS 的 KOA 框架和 EXPRESS 框架;
7.NODE.JS 对接 HYBRID 框架 VASSONIC 教程
【注:本文源自网络文章资源,由站长整理发布】