无需后台接入?带你玩转VasSonic 2.0里的Local Server

引言

腾讯手Q增值团队于今年8月份正式开源了VasSonic,一个轻量级高性能的Hybrid框架。VasSonic框架使用并行加载、动态缓存、增量更新等手段,实现了终端H5页面的秒开,对用户体验的优化做的非常极致。时隔三个月,在业务需求的驱动和开源社区的共同努力下,VasSonic迎来了开源后的第一次重大更新:VasSonic 2.0。

VasSonic 2.0新特性介绍

VasSonic 2.0新增了以下几个特性:

  • 支持Local Server模式,在该模式下无需后台配合亦可完成秒开,大大降低接入门槛
  • 支持自定义请求头和自定义响应头
  • 支持Cache-Control来控制缓存生命周期
  • 支持非utf-8编码

其中Local Server模式是2.0版本最大更新,也是本文重点介绍的一个特性。

玩转Local Server模式

Local Server模式介绍

一般情况下,一个项目要接入VasSonic,需要前端、终端、后台三端配合使用这个框架,才能达到预期的效果,这样有一定的接入成本。为了使开发者更加方便地使用VasSonic,Local Server模式应运而生。Local Server,顾名思义,相比于一般情况下终端、前端、后台全部接入,它允许在业务后台无法及时支持时,通过终端模拟server,提供本该后台支持的能力,从而降低接入成本。

开启Local Server模式后,对于从非Sonic后台返回的页面数据,终端会在收到数据的第一时间执行本该Sonic后台完成的处理逻辑:对页面进行模板和数据的拆分,对比本地的模板和数据缓存,根据两者的对比结果,添加Sonic响应头(eTag、template-change、template-tag),将此次请求返回伪装成正常情况下的Sonic后台返回。终端逻辑层面上对返回的数据是来自真正的Server还是Local Server并无感知,终端只需按照正常逻辑进行处理即可。因此在Local Server模式下,后台无需接入Sonic。

Local Server接入方式

在Android端使用Local Server,首先需要引用最新的VasSonic依赖,在build.gradle中添加:

compile 'com.tencent.sonic:sdk:2.0.0-beta'

Local Server功能默认是关闭的,需要初始化SonicSession配置时打开Local Server,Android端代码如下:

SonicSessionConfig.Builder sessionConfigBuilder = new SonicSessionConfig.Builder();

sessionConfigBuilder.setSupportLocalServer(true);

sessionConfigBuilder.build();

在iOS端使用Local Server,需要在Podfile中指定引入:

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '8.0'



target 'TargetName' do

    pod 'VasSonic', '2.0.0-beta'

end

然后在代码中通过 SonicSessionConfiguration 打开Local Serve

SonicSessionConfiguration \*configuration = [SonicSessionConfiguration new];

configuration.enableLocalServer = YES;

[[SonicEngine sharedEngine] createSessionWithUrl:self.url withWebDelegate:self         withConfiguration:configuration];

具体接入方法请详细参考官方Demo。

Local Server执行流程

VasSonic根据本地是否有缓存以及本地缓存数据与服务器数据的差异情况分为首次加载、完全缓存、数据更新、模板更新四种模式。除首次加载外,其他三种模式在Local Server下的执行流程与正常模式均有所差异。

首次加载

Local Server的首次加载与正常的首次加载流程一致。具体细节可参考快速模式或者标准模式的首次加载流程。

非首次加载·完全缓存

完全缓存是指本地数据与服务器数据相比,没有任何变更。以快速模式为例,Local Server的执行流程如下:

上图主要展示了两条并行线,左边是在主线程执行的Webview流程,右边是在子线程执行Sonic流程。

Sonic线程:

Sonic会话创建完成后,首先获取url对应的本地缓存数据,并通知主线程Webview加载该数据。接着Sonic会与Server建立连接,如果Server返回304,则Server数据没有变更,直接使用本地缓存,Sonic流程结束;否则,Sonic拉取到完整的Server数据,计算其SHA1作为eTag,如果与请求头中的eTag相同,就确定本次请求是完全缓存模式,Sonic流程结束。

主线程:

主线程在收到Sonic通知后,加载本地缓存数据,交给Webview渲染。

非首次加载·数据更新

数据更新就是本地的数据跟服务器的数据相比,只有data部分有变化,模板与服务器一样。以快速模式为例,Local Server的执行流程如下:

Sonic线程:

Sonic会话创建完成后,首先获取url对应的本地缓存数据,并通知主线程Webview加载该数据。接着Sonic与Server建立连接,读取到完整的Server数据,计算其SHA1作为eTag,如果与请求头中的eTag不同,Sonic将Server数据拆分为template和data,计算template的SHA1作为template-tag,如果与请求头中的template-tag相同,则说明模板没有变更,此时确定本次请求是数据更新,将拆分得到的data与本地保存的data做对比计算,得到增量数据。最后通知Webview进行数据更新,并更新本地缓存。

主线程:

数据更新模式下主线程会先收到加载本地缓存数据的通知,而Sonic线程通知主线程刷新data时,主线程可能还未开始加载本地缓存,也可能已经开始渲染本地缓存。如果WebView还未开始加载本地缓存,就会直接加载最新的数据(拆分得到的data跟本地模版合成的数据);如果主线程已经加载本地缓存,就会直接通过Js接口让WebView用增量数据刷新页面。

非首次加载·模板更新

模板更新是本地的模板跟服务器的模板不一致。以快速模式为例,Local Server的执行流程如下:

Sonic线程:

Sonic会话创建完成后,首先获取url对应的本地缓存数据,并通知主线程Webview加载该数据。接着Sonic与Server建立连接,读取到完整的Server数据,计算其SHA1作为eTag,如果与请求头中的eTag不同,Sonic将Server数据拆分为template和data,计算template的SHA1作为template-tag,如果与请求头中的template-tag不同则说明模板发生了变更,此时确定本次请求是模板刷新模式,通知主线程Webview进行模板刷新,并更新本地缓存。

主线程:

主线程会先收到加载本地缓存数据的通知,之后Sonic线程通知主线程进行模板刷新时,无论WebView是否已经开始加载本地缓存数据,都会直接重新加载最新的Server数据,完成模板刷新。

小结:Local Server模式的优缺点

优点:

Local Server模式下,简化了终端执行逻辑;而且无需后台接入Sonic,大大减少了接入成本。

缺点:

Local Server模式相比后台接入,损失了一定的性能。因为终端模拟后台的话,非首次加载场景需要等Server数据全部返回才能计算eTag,template-tag,template-change,从而判断是哪种模式(完全缓存、局部刷新还是模板更新)。

其他新增特性

1、支持自定义请求头和自定义响应头

VasSonic 2.0支持添加自定义请求头和自定义响应头,方式如下:

SonicSessionConfig.Builder sessionConfigBuilder = new SonicSessionConfig.Builder();

sessionConfigBuilder.setCustomRequestHeaders(requestHeaderMap);

sessionConfigBuilder.setCustomResponseHeaders(responseHeaderMap);

sessionConfigBuilder.build();

2、支持Cache-Control来控制缓存生命周期

VasSonic 2.0支持在Http响应头部添加Cache-Control字段来控制缓存生命周期,目前支持max-age、private、public三个可选值。

3、支持非UTF-8编码

VasSonic 2.0优化了字符编码的使用。如果http响应头中包含"Content-Type"字段,则优先使用该字段的值作为字符编码,否则默认使用UTF-8编码。

结语

2.0版本是VasSonic开源后的第一次重大更新,这个版本汇集了开源社区各位热心开发者的想法与建议,非常感谢大家的关注与参与。

我们的愿景是成为业界最好的H5加速框架!开发者在使用过程遇到问题或者有好的建议,欢迎在 Github上给我们提Issues。

Talk is cheap,read the code. If you are interested in VasSonic, just start to use it. Thank you for reading ~

点击阅读原文直接访问VasSonic源码:

https://github.com/Tencent/VasSonic

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

【nodeJS爬虫】前端爬虫系列 -- 小爬「博客园」

1508
来自专栏IT笔记

前后端分离之Vue项目构建测试打包发布

写在开始 其实之前对前后端分离研究过一段时间,中间由于项目进度耽搁也就不了了之了,最近项目中部分使用到了Vue,恰逢前端小伙伴们居然说要使用这个东西,也许是前端...

3669
来自专栏非著名程序员

有关使用Universal-Image-Loader的遇到的问题和使用小技巧

? 今天我们来分析一下使用Universal-Image-Loader异步加载图片时遇到的一些问题和解决办法。今天咱们的公众号不分享高大上的原理分析和源码分析...

1898
来自专栏liulun

基于QT的webkit与ExtJs开发CB/S结构的企业应用管理系统

一:源起 1.何为CB/S的应用程序     C/S结构的应用程序,是客户端/服务端形式的应用程序,这种应用程序要在客户电脑上安装一个程序,客户使用这个程序与...

2798
来自专栏QQ会员技术团队的专栏

无需后台接入?带你玩转VasSonic 2.0里的Local Server

腾讯手Q增值团队于今年8月份正式开源了VasSonic,一个轻量级高性能的Hybrid框架。VasSonic框架使用并行加载、动态缓存、增量更新等手段,实现了终...

30810
来自专栏吴伟祥

Linux 远程登录:Xshell、SecureCRT、Putty

       Alt + Enter -- 全屏   Alt + B --打开新的连接   Alt + 1/2/3/4/5.../9 -- 切换到第1/2/...

4392
来自专栏工科狗和生物喵

搭建你自己的网站--LAMP架构(Ubuntu 16.04)

笔者目前算是一个WEB方向的踽踽前行的小菜鸟,但是也是现在手上有两台云服务器在手的人了,网站也做了两个了,所以,今天接着昨天的话题,我们来搭建一个自己网站,这样...

6675
来自专栏码代码的陈同学

Rancher某环境所有主机网络瘫痪问题

本文记录Rancher整个环境因一台主机网络问题导致环境中所有主机网络瘫痪,无法跨主机通讯问题。

2653
来自专栏别先生

雅虎Yahoo 前段优化 14条军规

Yahoo 14条 雅虎十四条 腾讯前端设计的Leader推荐我背熟的。请大家都能好好学习,不要像我一样一扫而过,好好的记下来!不仅仅是晓得一些CSS x...

19210
来自专栏進无尽的文章

工具篇-统计Crash的工具Crashlytics使用指南

按照官网里的步骤你基本上一步一步来就可以完成 Crashlytics集成到项目中了。 我在集成的时候遇到了一些问题:

1381

扫码关注云+社区