Skip to content
vasdeveloper edited this page Nov 8, 2017 · 24 revisions

VasSonic:轻量级高性能Hybrid框架

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

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

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

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

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

图1: 使用Sonic模式前 图2: 使用Sonic模式后
default mode VasSonic mode

功能

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

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

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

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

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

接入指引

入门须知

Android端接入指引

iOS端接入引用

后端接入指引-Nodejs

后端接入指引-PHP

FAQ

FAQ-Android版本

FAQ-iOS版本

FAQ-Java后端版本

实现原理

Android Sonic Quick模式实现原理

Android Sonic Standard模式实现原理

iOS 终端实现原理

Sonic 2.0 新特性(LocalServer)介绍

文章

VasSonic演进优化历程

QQ移动页面框架优化实践-GMTC2017 Slide