腾讯由于有微信小程序等需要快速打开H5的场景，因此加速H5首屏打开效率就成了研发的重任。根据这两天腾讯发布的VasSonic来看，打开的效率确实提高了不少。本文将结合nodejs来对VasSonic框架进行对接。

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 {

//other Sonic status.

return result.data

}

});

前端如何使用

这里是一个简单的演示，演示如何使用Sonic为前端。

业余草 Sonic php 实例：www.xttblog.com

//通过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;

}

}

}

//步骤1：通过插入不同的注释锚来指定模板和数据。

//步骤2：通过Javascript界面从移动客户端接收diff数据。

window.function(){

getDiffData();

}

上面的前端用法和php对接Hybrid框架VasSonic教程是一样的。