Home
Sonic是腾讯QQ会员团队研发的一个轻量级的高性能的Hybrid框架，专注于提升页面首屏加载速度，完美支持静态直出页面和动态直出页面，兼容离线包等方案。
该框架使用终端应用层原生传输通道取代系统浏览器内核自身资源传输通道来请求页面主资源，在移动终端初始化的同时并行请求页面主资源并做到流式拦截，减少传统方案上终端初始化耗时长导致页面主资源发起请求时机慢或传统并行方案下必须等待主资源完成下载才能交给内核加载的影响。
另外通过客户端和服务器端双方遵守Sonic格式规范(通过在html内增加注释代码区分模板和数据)，该框架做到智能地对页面内容进行动态缓存和增量更新，减少对网络的依赖和数据传输的大小，大大提升H5页面的加载速度，让H5页面的体验更加接近原生，提升用户体验及用户留存率。
目前QQ会员、QQ购物、QQ钱包、企鹅电竞等业务已经在使用，平均日均PV在8000w以上，页面首屏耗时平均在1s以下。
图1为默认加载方式，图2为sonic加载方式。
目前sonic框架是市面上支持最完善的Hybrid框架，完美适用于静态直出页面和动态直出页面。组件目前包括以下几大块功能：
1.并发请求： 用户点击页面入口后，在进行终端初始化逻辑的同时，通过Sonic中间层并发启动子线程去拉取页面资源，等内核初始化完成之后，中间层负责把拉取的数据交给内核去加载渲染。通过并行的加载方式，弱化了终端的初始化耗时，让页面加载总耗时更小。
2.流式拦截： 内核无需等待子线程把页面主资源所有数据完整下载后再进行加载，而是通过增加一个中间层Sonic桥接流来连接内核和数据，当内核从桥接流读取数据的时候，桥接流会先读取完内存流再读取网络流，这个过程对内核透明，内核可以做到边加载边解析，页面渲染更快。
3.动态缓存： Sonic中间层在用户第一次打开页面后，会将页面内容缓存到本地。当用户再次打开页面的时候，Sonic中间层会先读取缓存交给内核加载，让用户快速看到内容，同时向服务器拉取最新的数据，等新数据拉取回来之后，再刷新变化数据展示最新内容。
4.增量更新： 在动态缓存中，页面要做到仅更新变化元素，需要做到增量更新。在本方案中，增量更新是指客户端和服务器遵守一定的格式规范，在页面内容里面插入特定标签(比如注释块)来标识页面哪些内容是不变的，哪些内容是变化的，其中在Sonic框架中，不变的内容称为模板(template)，变化的内容称为数据(data)，一个符合Sonic格式规范的页面抽离出模板和数据组成，模板和数据可以合成页面。同时还扩展了协议头部，带上Sonic版本号等信息。 在sonic实现中，通过特定标签<!—sonicdiff-xxx-begin—>和<!—sonicdiff-xxx-end—>分别代表一个数据块xxx的开始和结束，将页面里面的所有数据块抽离后仅留下占位符{xxx}的内容则是模板。如果存在模板和数据，仅需要把数据填充到占位符里面就可以合成页面。 当用户第一次打开页面的时候，Sonic中间层会缓存页面内容到本地，同时将页面抽离为模板和数据。第二次请求的时候，会带上模板的唯一标识(md5)，后台服务器则会将新页面的模板跟请求头里面的模板信息进行对比，a)如果发现模板没有变化，仅返回新页面的数据块即可。当终端收到新页面的数据块的时候，跟本地的数据块进行Diff计算出增量数据，然后提交到页面进行增量刷新即可。b)如果发现模板存在变化，则返回全新页面内容，终端会重新加载页面。
5.预加载： 支持后台通过push或者页面通过JSAPI等方式来做到sonic预加载，提前把页面内容缓存到本地，整个过程无缝连接，让页面秒开体验！