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

阅读数：5312 2019 年 8 月 20 日 14:14

无需后台接入？带你玩转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 Server

复制代码
SonicSessionConfiguration *configuration = [SonicSessionConfiguration new];
 
configuration.enableLocalServer = YES;
 
[[SonicEngine sharedEngine] createSessionWithUrl:self.url withWebDelegate:self         withConfiguration:configuration];

具体接入方法请详细参考官方 Demo ( https://github.com/Tencent/VasSonic )。

LI’m ocal Server 执行流程

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

首次加载

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

非首次加载·完全缓存

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

无需后台接入？带你玩转VasSonic 2.0里的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 的执行流程如下：

无需后台接入？带你玩转VasSonic 2.0里的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 的执行流程如下：

无需后台接入？带你玩转VasSonic 2.0里的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

本文转载自公众号小时光茶舍（ID：gh_7322a0f167b5）。

原文链接：

https://mp.weixin.qq.com/s/ASRzAFJ5Q_Su72rSiFSPbQ

语言 & 开发腾讯HTML5

评论

发布