Sonic：轻量级的高性能的Hybrid框架

Sonic是腾讯QQ会员团队研发的一个轻量级的高性能的Hybrid框架，专注于提升H5页面首屏加载速度，让H5页面的体验更加接近原生，提升用户体验及用户留存率。

示例：

非Sonic模式 点击到页面打开耗时:

普通直出的方式

首次访问 点击到页面打开耗时:

用户第一次访问，本地无缓存;使用直出的方式，终端生成缓存。

模版更新 点击到页面打开耗时:

本地模版跟服务器模版不一样;缓存失效，清除缓存，重新加载页面。

数据更新 点击到页面打开耗时:

模板一致，数据变更;针对页面局部数据变化的场景，Sonic会预先加载本地缓存再将变化部分的数据异步更新，提升用户体验。

完全缓存 点击到页面打开耗时:

本地数据与服务器数据完全一样;直接使用缓存，页面秒开。

页面打开速度效果对比

以手机QQ-VIP中心首页为例，在接入Sonic框架之后，页面打开速度在数据更新场景下优化提升42%，页面内容不变的场景下(完全cache模式)优化提升50%以上。

原有直出页面：	Sonic改造页面：

Sonic实现原理简介

Sonic框架使用终端应用层原生传输通道取代系统浏览器内核自身资源传输通道来请求页面主资源，在移动终端初始化的同时并行请求页面主资源并做到流式拦截，减少传统方案上终端初始化耗时长导致页面主资源发起请求时机慢或传统并行方案下必须等待主资源完成下载才能交给内核加载的影响。另外通过客户端和服务器端双方遵守Sonic格式规范(通过在html内增加注释代码区分模板和数据)，该框架能做到智能地对页面内容进行动态缓存和增量更新，减少对网络的依赖，节省用户流量，加快页面打开速度。