手 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 的页面体验。