腾讯发布轻量级高性能Hybrid框架-VasSonic

紧急

Lcode.org

     VasSonic轻量级Hybrid框架正式开源。VasSonic取名于世嘉游戏形象音速小子，是腾讯VAS(QQ会员)团队研发的一个轻量级的高性能的Hybrid框架，专注于提升页面首屏加载速度，完美支持静态直出页面和动态直出页面，兼容离线包等方案。

    该框架使用终端应用层原生传输通道取代系统浏览器内核自身资源传输通道来请求页面主资源，在移动终端初始化的同时并行请求页面主资源并做到流式拦截，减少传统方案上终端初始化耗时长导致页面主资源发起请求时机慢或传统并行方案下必须等待主资源完成下载才能交给内核加载的影响。

     另外通过客户端和服务器端双方遵守VasSonic格式规范(通过在html内增加注释代码区分模板和数据)，该框架做到智能地对页面内容进行动态缓存和增量更新，减少对网络的依赖和数据传输的大小，大大提升H5页面的加载速度，让H5页面的体验更加接近原生，提升用户体验及用户留存率。

     目前QQ会员、QQ游戏中心、QQ个性化商城、QQ购物、QQ钱包、企鹅电竞等业务已经在使用，日均PV在1.2亿以上(仅统计手Q内数据)，页面首屏平均耗时在1s以下。

 

使用前后对比(OPPO R9机器，3G环境)

图1: 使用Sonic模式前:

图2: 使用Sonic模式后

功能

目前VasSonic框架是市面上支持最为完善的Hybrid框架，完美适用于静态直出页面和动态直出页面。具有以下几大特性：

快速： Sonic通过中间层启动子线程并发拉取页面主资源和流式拦截的方式，支持内核边加载边渲染，弱化终端初始化过程耗时的影响，同时对页面进行动态缓存和增量更新，减少页面对网络数据传输的依赖，极速提升H5页面的加载速度。

省流量： Sonic支持动态缓存页面内容，通过客户端和服务端遵守一定的格式规范，每次请求仅需要返回变动的数据块数据，大大减少响应数据传输。

良好的用户体验: 通过预推送以及动态缓存页面，Sonic先加载本地缓存页面，用户可以快速看到内容，即使在无网络场景下，依然能看到首屏内容，让H5页面的体验更加接近原生。

易用： Sonic框架来自腾讯VAS团队超过一年的优化提速总结，它是一整套解决方案，可以快速在Android和iOS平台上接入使用，并且后台支持Node.js和PHP平台一键部署，无须繁琐配置流程。

 

接入指引

1.Android端接入指引:

https://github.com/Tencent/VasSonic/blob/master/sonic-android/README.md

2.iOS端接入指引:

https://github.com/Tencent/VasSonic/blob/master/sonic-iOS/README.md

3.后端Node.js接入指引:

https://github.com/Tencent/VasSonic/blob/master/sonic-nodejs/README.md

4.后端PHP接入指引:

https://github.com/Tencent/VasSonic/blob/master/sonic-php/README.md

本公众号欢迎大家投稿，如果你希望你的文章可以被更多人看到，直接将md、doc等格式的文章到我邮箱即可（[email protected]），也可以加我QQ/微信(781931404)好友，需要注明（投稿），谢谢。

不来一起嗨么？