手Q开源Hybrid框架VasSonic发布2.0，值得用吗？

未分类

VasSonic是由腾讯手Q增值团队开发的一个轻量级、高性能的Hybrid框架，并于2017年8月8日在Github上开源，在开源后的24小时以内获得超过1600个star数，今年11月底，腾讯推出了VasSonic 2.0，这是开源以来的第一次重大更新。

想了解更多关于VasSonic的信息，可跳转阅读手Q开源Hybrid框架VasSonic介绍，极致的页面加载速度优化。

VasSonic源码地址：

https://github.com/Tencent/VasSonic

VasSonic 2.0有哪些新特性？

1. 支持Local Server模式，在该模式下无需后台配合亦可完成秒开，大大降低了接入的门槛；

2. 支持自定义请求头和自定义响应头；

3. 支持Cache-Control来控制缓存生命周期；

4. 支持非utf-8编码。

关于Local Server模式的详细介绍可跳转阅读：无需后台接入？带你玩转VasSonic 2.0里的Local Server

VasSonic开发团队采访

为了进一步了解VasSonic开发背后的故事，InfoQ特地对VasSonic项目负责人Marlonlu进行了采访，以下是采访的内容整理。

InfoQ: 您好，我们想了解一下VasSonic主要在哪些方面做了优化使得它能够摒弃传统框架的劣势？

Marlonlu:
1.终端UI方面，终端创建Webview等UI方面比较耗时，VasSonic通过创建中间层，智能地切换上下文Context来预创建和复用Webview，把UI的创建耗时降到了最低。

2.网络方面，传统模式下一般通过DNS预解析、并行加载来减少网络耗时，我们在实践过程中发现很多场景下经过第一步优化后，WebView在等待并行下的网络传输。面临这种情况我们构造了网络中间层。

启动子线程请求页面主资源，子线程中不断将网络数据读取到内存中。当WebView初始化完成的时候，提供一个中间层BridgeStream来连接WebView和数据流。当WebView读取数据的时候，中间层BridgeStream会先把内存的数据读取返回后，再继续读取网络的数据。通过这种桥接流的方式，整个内核无需等待并且做到边加载边渲染。

3.在页面数据更新方面，我们沿用了QQ空间与增值合作的webso方案中的动静分离的思想，并扩展了部分新的字段。首先我们将整个页面html通过VasSonic标签进行划分，包裹在标签中的内容为data，标签外的内容为模版。首次请求时把整个页面请求到本地并分别保存成模板跟数据，非首次请求下终端先展示缓存页面，然后通过增量更新数据来局部刷新页面，整个过程用户无感知便能获取到最新页面内容，达到秒开的程度，极大地提升了用户体验。

InfoQ: 当时你们为什么会想要开源？

Marlonlu:
整个开源过程可以从以下三个阶段来说明：

第一个阶段我们主要是解决部门业务性能问题，由于我们部门业务大部分通过H5页面呈现，所以我们非常关注H5性能。通过大量实践，在常规优化手段达到瓶颈后提出来VasSonic方案，并不断地迭代优化VasSonic实现，最终达到了比较好的效果，然后我们把优化经验进行了总结并应用到了部门其他业务。

第二阶段我们开始在公司进行推广，公司业务看到我们的优化效果后，也非常有意愿接入，于是我们开始做一些VasSonic组件的抽离封装，使得非手Q业务也能快速接入。通过更多业务的在线实践，也反过来促进VasSonic框架的进一步完善。

第三个阶段主要是外部的行业会议分享交流，交流后我们发现行业都存在这个痛点，于是我们决定开源，来帮助更多人解决H5性能问题。这个历程主要是想说明很多开源的idea正是来自业务优化的成果，当开发者在某一个领域技术挖掘的比较深入时，这些剥离封装好后就可以考虑开源，开发者很多时候并不是缺少开源项目，而是缺少开源心态。

InfoQ: 方便透露一下VasSonic目前在内部的使用情况以及外部的使用情况吗？

Marlonlu:
目前VasSonic在内部主要有手Q上的个性化首页、Vip中心、游戏中心、动漫、QQ部落、QQ钱包、 群应用等业务以及腾讯视频、企鹅电竞、鹅漫U品等app，外部主要有逐浪小说、小象优品、返利网以及正在灰度上线的随手记等app。

InfoQ: 目前VasSonic内部的开发节奏是怎样的？内部版本和开源版本有区别？

Marlonlu:
目前VasSonic主要跟着手机QQ的发布节奏，而手机QQ主要是一个半月到两个月发布一个大版本，我们会随着手机QQ发布新版本的小灰、大灰、正式发布三个阶段来发布VasSonic的alpha、beta跟正式release版本，这样子通过现网实践来最大限度地保证VasSonic框架每一个新版本的质量跟稳定性。

内部版本从开源版本中fork出一个包含业务特殊逻辑的分支，核心功能内外版本都是一致的。

InfoQ: VasSonic在开源社区的发展情况是怎样的？在开发路上，你们采纳了哪些社区的建议或PR？

Marlonlu:
在VasSonic 1.0版本发布后，我们发现中小企业最大的成本在于前后端的配合改造，因此我们采纳了社区的建议推出了VasSonic 2.0 LocalServer模式（VasSonic 2.0 新特性(LocalServer)介绍），让开发者不需要前后端配合下也能享受到VasSonic的首屏提速效果。

同时在Github Issues和交流QQ群中最多开发者反馈的支持非UTF-8字符集以及Cache-Control控制缓存生命周期这几个特性都在VasSonic 2.0版本中得到了落地实现，Java后台方案也在内部逐渐规划实现中。

InfoQ：采用HTTPS或HTTP/2协议是否会影响VasSonic?

Marlonlu:
VasSonic是完美支持HTTPS业务的。而且Http2.0并不会影响VasSonic，VasSonic是构造单独网络链接去拉取首屏数据，当客户端展示首屏后，内核再通过内部的网络池去请求其他子资源，这两者并不会影响。

InfoQ: 这个可以看做是前端驱动后端配合，那么它是否支持前端进行数据聚合层的开发？

Marlonlu:
我们非常支持前端进行数据聚合层的开发，随着nodejs和大前端概念的发展，现在前端已经不仅仅是浏览器侧开发了，很多前端同时负责了WEB后端开发，在我们团队就是如此，这样开发效率更高，也非常有利用提高前端工程师的知识技能。

InfoQ: 接下来你们开发团队还打算在哪方面做进一步地改进？是否已经有改进方案？

Marlonlu:
在推出VasSonic 2.0版本后，针对页面没有内联的子资源，我们通过server端下发链接，然后提前加载这些子资源来提高页面装载的速度，同时针对动态推荐等业务推出页面reload功能，不需要退出页面便可以拉取服务器上最新的直出内容。

InfoQ: 想请您预测一下Hybrid框架未来的发展趋势。

Marlonlu:
随着移动互联网带宽的提升、移动设备性能的提升，H5页面的能力会越来越强，页面加载会也来越快，Hybrid框架未来依然会是主流开发模式，只不过会和终端更紧密地结合，以提升H5的页面体验。