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 有哪些新特性?
- 支持 Local Server 模式,在该模式下无需后台配合亦可完成秒开,大大降低了接入的门槛;
- 支持自定义请求头和自定义响应头;
- 支持 Cache-Control 来控制缓存生命周期;
- 支持非 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 的页面体验。
评论