写点什么

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

  • 2019-08-20
  • 本文字数:3283 字

    阅读完需:约 11 分钟

无需后台接入?带你玩转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 的执行流程如下:



上图主要展示了两条并行线,左边是在主线程执行的 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


本文转载自公众号小时光茶舍(ID:gh_7322a0f167b5)。


原文链接:


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


2019-08-20 14:149282

评论

发布
暂无评论
发现更多内容

解密最受欢迎的开源 Serverless 框架:流量篇

阿里巴巴云原生

阿里云 云原生

图文共赏---人工智能时代的由文生图

fliter

【深度观点】资源数字化、数字资产化与资产数权化是分布式商业运行的核心要素

Geek_e4ef21

数字化转型 数字资产 数据要素 分布式商业

让uniapp小程序支持多色图标icon:iconfont-tools-cli

达摩

uni-app iconfont-tools-cli

一步步教你如何搭建K8S集群

不在线第一只蜗牛

Kubernetes 云原生 容器化 K8s 多集群管理

电商API接口的最佳实践与案例分析

Noah

1688图片搜索API接口丨拍立淘API接口文档

tbapi

1688 以图搜图 1688API 图片搜索API接口 图片搜索接口

1688商品列表API接口文档

tbapi

1688 1688API接口 1688商品列表数据接口

惊讶!史上最年轻的 Apache Committer 诞生!!!

ApacheStreamPark

Apache 大数据 开源 StreamPark 00后

python开发之远程开发工具对比

不在线第一只蜗牛

Python 开发工具 开发语言

K8S学习指南(7)-k8s核心概念Annotation

俞兆鹏

《Java并发实现原理:JDK源码剖析》PDF

程序员李木子

思考-RBAC中对于权限编码部分的压缩处理

alexgaoyh

Java rbac 权限设计 压缩算法 权限编码

【深入浅出JVM原理及调优】「搭建理论知识框架」全方位带你认识和了解JMM并发模型的基本原理

码界西柚

Java JVM 计算机 Java虚拟机 2024年第十六篇文章

低代码技术杂谈

互联网工科生

软件开发 低代码 JNPF

代码之外:工程师的成长进阶秘籍

声网

《Java实战(第2版)》PDF

程序员李木子

C# 字符串操作指南:长度、连接、插值、特殊字符和实用方法

小万哥

C# 程序人生 编程语言 软件工程 后端开发

2024-01-20:用go语言,小扣在探索丛林的过程中,无意间发现了传说中“落寞的黄金之都“, 而在这片建筑废墟的地带中,小扣使用探测仪监测到了存在某种带有「祝福」效果的力场, 经过不断的勘测记录,

福大大架构师每日一题

福大大架构师每日一题

5分钟说清楚如何让代码更加整洁

伤感汤姆布利柏

程序员 代码 代码规范 代码阅读 前沿

无需后台接入?带你玩转VasSonic 2.0里的Local Server_语言 & 开发_腾讯手Q增值团队_InfoQ精选文章