BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

手Q开源Hybrid框架VasSonic发布2.0,值得用吗?

| 作者 覃云 关注 2 他的粉丝 发布于 2017年12月25日. 估计阅读时间: 8 分钟 | GMTC大前端的下一站,PWA、Web框架、Node等最新最热的大前端话题邀你一起共同探讨。

亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知

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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT