http://www.ox-holdings.com

VasSonic支持动态缓存页面内容新匍京娱乐场手机版,使得Web运行的性能能够尽可能的接近Natvie

摘要VasSonic取名于索尼动画形象音速小子,是腾讯QQ会员 VAS团队研发的一个轻量级的高性能的Hybrid框架,专注于提升页面首屏加载速度,完美支持静态直出页面和动态直出页面,兼容离线包等方案。2017年8月8日正式开源!基本介绍VasSonic取名于索尼动画形象音速小子,是腾讯QQ会员 VAS团队研发的一个轻量级的高性能的Hybrid框架,专注于提升页面首屏加载速度,完美支持静态直出页面和动态直出页面,兼容离线包等方案。目前QQ会员、QQ购物、QQ钱包、企鹅电竞等业务已经在使用,平均日均PV在1.2亿以上,并且这个数字还在快速增长。接入VasSonic后首次打开可以在初始化APP的时候并行请求页面资源,并且具备边加载边渲染的能力。非首次打开时,APP可以快速加载上次打开动态缓存在本地的页面资源,然后动态刷新页面。腾讯手机QQ通过VasSonic框架使得页面首屏耗时平均低于1S以下。使用前后对比(OPPO R9机器,3G环境)使用Sonic模式前:使用Sonic模式后:VasSonic功能特性目前VasSonic框架是市面上支持最为完善的Hybrid框架,完美适用于静态直出页面和动态直出页面。具有以下几大特性:快速:VasSonic通过中间层启动子线程并发拉取页面主资源和流式拦截的方式,支持内核边加载边渲染,弱化终端初始化过程耗时的影响,同时对页面进行动态缓存和增量更新,减少页面对网络数据传输的依赖,极速提升H5页面的加载速度。省流量:VasSonic支持动态缓存页面内容,通过客户端和服务端遵守一定的格式规范,每次请求仅需要返回变动的数据块数据,大大减少响应数据传输。良好的用户体验:通过预推送以及动态缓存页面,VasSonic先加载本地缓存页面,用户可以快速看到内容,即使在无网络场景下,依然能看到首屏内容,让H5页面的体验更加接近原生。易用:VasSonic框架来自腾讯VAS团队超过一年的优化提速总结,它是一整套解决方案,可以快速在Android和iOS平台上接入使用,并且后台支持Node.js和PHP平台一键部署,无须繁琐配置流程。源码托管地址 started with AndroidGetting started with iOSGetting started with Node.jsGetting started with PHPDemo下载Hereis the Android sample demo.Hereis the iOS sample demo.

功能简介

以下功能简介的几段文字引用自github上VasSonic官方wiki。地址为:https://github.com/Tencent/VasSonic/wiki

移动Web优化专场主要讲在移动设备上如何优化H5,使得Web运行的性能能够尽可能的接近Natvie。

解决移动端打开web页面卡顿,白屏的问题等问题

优化:

  • 静态直出。Vnues-腾讯自动构建发布系统
  • 离线预推。页面数据预推到用户手机,手机端加载的是本地资源(增量适用于安卓端),首次访问不用等
  • 并行加载。webview与网络层并行触发减少各所有组件加载的总耗时
  • 动态缓存。将已经加载页面动态缓存下来,下次访问立即获得数据
  • 页面拆分。页面拆分为数据和模版框架(二八法则,大部分情况下用户的UI框架是不会变),实现增量刷新页面而不发生整个页面刷新的视觉闪屏

问题
1.离线增量预推具有局限性
2.页面拆分依赖后段渲染对于传统应用可行性较差,源码编写时须要多加标记去拆分当前页面
地址:https://github.com/Tencent/VasSonic

时间: 2019-06-29阅读: 249标签: h5背景

快速:

通过中间层启动子线程并发拉取页面主资源和流式拦截的方式,支持内核边加载边渲染,弱化终端初始化过程耗时的影响,同时对页面进行动态缓存和增量更新,减少页面对网络数据传输的依赖,极速提升H5页面的加载速度。

QQ移动页面框架优化实践

主要是Android QQ方面,因为大部分的内容基于H5开发,所以页面优化对Android QQ的性能提升很有用。

在回家的地铁上使用自家应用H5相关功能时,可能由于网络原因导致体验较差,在使用微信、今日头条App时,感觉很流畅,基本做到了秒开,然后就想了解下业内H5秒开方案。

省流量:

支持动态缓存页面内容,通过客户端和服务端遵守一定的格式规范,每次请求仅需要返回变动的数据块数据,大大减少响应数据传输。

传统页面的优化实践

页面加载的核心是通过CDN(Content Delivery Network)进行静态内容的分发,以及从"Data Server"获取动态数据:

这种方案是非常依赖于网络质量的,并且动态数据是在页面打开时才获取,导致空白页面的出现:

WebView池
不在单独使用时才创建WebView,而是预先处理,在系统空闲的阶段预先创建,并对使用完的WebView进行回收利用,也就是集中统一处理,而使用的程序“即拿即用”,另外为便于复用,抽取上下文关系到独立的中间层:

静态直出

优化静态直出,向“Data Server”获取最新的动态数据后,更新首屏页面,这些发布到“CDN”上,减少了用户需要动态更新的数据:

所谓“直出”,是Web性能优化的一个概念,简单的说就是将多次网络请求获取页面的方式变成减少请求次数,让Web服务器一次性的将渲染好的页面数据返回,这篇文章直出理论与实践总结讲的不错,一步步的讲解了多种直出模式(前后端分离->数据直出->服务端渲染):

离线预推

对于动态请求过度依赖于网络的问题,在登录阶段即开始更新离线包,作为WebView的耳机缓存,减少实时网络请求:

针对可能占用过多带宽的问题:使用“7z”生成压缩包,使用“Bsdiff”生成增量包,尽量减少带宽要求。

问题原因

良好的用户体验:

通过预推送以及动态缓存页面,先加载本地缓存页面,用户可以快速看到内容,即使在无网络场景下,依然能看到首屏内容,让H5页面的体验更加接近原生。

动态直出页面的优化实践Sonic

由于业务的变化,“个性化推荐”,使得动态直出成为必须考虑的选项,而不同于静态直出,动态直出面对的问题包括:

  • 服务端实时拉取数据渲染耗时长
  • 首屏无法使用离线预推等缓存策略

然后我们可以看看QQ采取的哪些措施

在"WebView"launch的时候就开始执行网络请求,而不是空等。

其实还是一种预先下载的行为,然后自动的将网络流保存到内存中,使用时边加载边解析,避免空等。

实时缓存,在使用缓存的时候更新缓存:第一次页面打开后会有缓存,下次打开直接用,再等待下载更新。避免重刷,这个会导致白闪,只刷新局部页面。

要实现“增量更新”只要在数据格式上进行规范,使得提交和合并都简单易行

在此基础上的可以使用"Preload"实现预下载继续优化:

这套系统叫做"Sonic"已经开源了:

文件下载耗时:包括html、css、js、图片等

易用:

框架来自腾讯VAS团队超过一年的优化提速总结,它是一整套解决方案,可以快速在Android和iOS平台上接入使用,无须繁琐配置流程。

关于移动页面框架的一点思考

最后比较了Web和Native:

建议根据具体的应用业务选择合适的框架:

页面渲染耗时:页面渲染,解析js、css文件等

并行加载

VasSonic在加载web之前,先根据url创建一个会话。独立起一个线程去请求url定位的资源并缓存。当UIWebView加载url时,通过NSURLProtocol拦截请求,并根据不同的策略进行加载和刷新。因此这是两个并行的线程,如果手动执行Sonic线程,就是预加载。

新匍京娱乐场手机版 1

并行加载示意图

移动网页加速的通用解决方案探讨和实践

WebView创建耗时:首次创建WebView耗时大约需要500ms左右,第二次创建耗时大约需要20ms左右

数据模板

为了方便数据的缓存和刷新,提高效率,Sonic将一个完整的html页面做了数据和模板的拆分。打开一个页面之后,可以看到沙盒里面多了下面四个文件,如下图所示。分别是以.html、.data、.rsp、.temp为后缀,分别表示完整的网页、动态数据、配置、和模板数据。

新匍京娱乐场手机版 2

Sonic网页缓存文件

那么这几个文件里面的数据到底是怎样的呢?文件之间的关系是什么?

新匍京娱乐场手机版 3

缓存文件的由来

通过源码的分析,可以看到,几个文件之间的关系如上图所示。其中.html文件是完全的网页文件,然后把.html文件进行拆分,就得到了.temp和.data文件。而.rsp文件是直接把请求返回头中的一些配置取出来缓存在文件中。
打开这些文件看里面的内容,也可以看出这种关系。如下图所示,为完整的.html文件内容。

新匍京娱乐场手机版 4

.html文件内容

特意圈了一下,里面绿色的注释。这个< !--sonicdiff-data1--> < !--sonicdiff-data1-end-->就是数据和模板区分的边界。再看.temp文件,其实也是一个html文件,如下图所示:

新匍京娱乐场手机版 5

.temp文件内容

从图中可以看出,和.html文件相比,没有了< !--sonicdiff-data1-->< !--sonicdiff-data1-end-->内部的内容,被替换成了{data1}。然后再看下.data文件,如下图所示:

新匍京娱乐场手机版 6

.data文件内容

可以看出,.data文件其实是一个.plist文件,其中用Key {data1}储存了< !--sonicdiff-data1-->< !--sonicdiff-data1-end-->内部的内容。这样就很明了了,.temp和.data数据拼起来就是.html文件内容。再来看最后一个文件,.rsp文件,如下图所示:

新匍京娱乐场手机版 7

.rsp文件内容

.rsp文件其实也是一个.plist文件,里面存储的都是各种配置、策略的键值对。

遇到的困扰

这里首先介绍了目前困扰大家的“速度低下”的移动网络的现状,这个直接影响到了企业的业务,比如“在1.5s内每慢500ms,就会降低3%的用户点击”,所以如何提升性能,对于站点的意义很大。

业界已有一些解决方案,比如:

  • Instant Article:FB的文章快速加载工具,优化RSS/HTML标签来精简内容,并可以在后台自动加载"Pre-load",加载速度为普通移动网页的十倍
  • AMP:Accelerated Mobile Pages,使用优化过的HTML标准,限制使用CSS/JS,控制资源下载时机,高度缓存,简单来说是基于优化的HTML的页面规范实现页面高速加载。

对于百度搜索来说,结果页点出效果有很多不足:

  • 资源加载慢
  • JS执行效率低
  • 资源加载无控制
  • 点出过场体验

常见解决方案WebView缓存相关

缓存策略

Sonic很重要的一个功能点就是缓存,那么它的缓存策略有哪些?
从请求的返回头里,可以看到一个Key——SonicHeaderKeyCacheOffline,这个Key里面存的就是关于如何缓存、刷新的几个值。这几个值表示的意思分别是,SonicHeaderValueCacheOfflineStore表示仅仅缓存,不刷新页面;SonicHeaderValueCacheOfflineStoreRefresh表示既缓存又刷新页面;SonicHeaderValueCacheOfflineRefresh表示不缓存,仅仅刷新页面;SonicHeaderValueCacheOfflineDisable表示使本地缓存失效。如下所示:

新匍京娱乐场手机版 8

首次加载缓存策略

当首次加载页面的时候,如果返回的是状态码200,则返回头中取出对应的缓存策略并缓存。如果返回的不是200,则是请求异常,做异常处理。如果不是首次加载页面,情况又有些不同,如下所示:

新匍京娱乐场手机版 9

非首次加载缓存策略

当非首次加载时,首先会看返回的状态码。如果状态码是304,说明服务端没有更新,所以客户端只更新一下配置文件里面的请求时间戳,不刷新缓存,也不刷新页面。如果状态码是200,说明服务端内容有变化,本地缓存需要刷新。但是具体是那部分发生了变化,需要根据返回头里面的Key——SonicHeaderKeyTemplateChange来判断。如果SonicHeaderKeyTemplateChange为true,则表示模板有更新,需要删除所有缓存,重新走模板数据拆分逻辑。如果缓存策略中有刷新,则向Webview发起重新加载。如果SonicHeaderKeyTemplateChange为false,则表示模板不变数据有更新,仅仅需要更新数据文件。但是如果缓存策略中有刷新,要将新的数据发给js刷新Web界面。

框架设计和实现

加速的常用优化手段:

  • 代码优化(css、html、js优化)
  • 减少HTTP请求(雪碧图,文件合并、懒加载等)
  • 减少DOM节点
  • ⽆阻塞(内联CSS,JS后置)
  • 使用⾸屏加载
  • 缓存

雪碧图是指CSS Sprite,CSS精灵,是一种CSS图像合并技术,将小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分。

需要解决的核心问题:

这里可以很清晰的看到,百度是通过解决这四个核心问题来实现加速:

  • 资源加载控制:用户立刻需要的有限加载
  • 网络连接优化:优化服务器部署,让访问更容易进行
  • 代码执行效率:优化JS执行效率,从而保证页面执行加速
  • 页面资源缓存:缓存是加速的利器

框架设计的核心组成:

可以看到加速框架设计的核心组成,主要是三部分:

  • HTML规范:其实类似于开篇提到的FB和Google的方法,规范HTML,减少标签使用,给HTML做瘦身
  • JS运行环境:使用Iframe加载方式,控制资源加载,优化代码执行效率
  • Cache服务:缓存静态资源,提高访问效率

浏览器缓存机制,通过请求头控制缓存

2.0新特性—Local Server

Local Server是VasSonic 2.0中的新特性。Local Server的目的是简化VasSonic的接入,在客户端模拟服务端的配置,省去服务端的配置。那么Local Server做了哪些处理呢?
其实Local Server可以算作是客户端和服务端的一个中间层。如果开启了Local Server模式,即使从服务端请求到的只有数据,没有返回头中的一些特定Key的配置,也没关系。因为Local Server层会通过计算把这些特定Key的配置补充到返回的头中。

新匍京娱乐场手机版 10

Local Server模式返回头中的Key

在Local Server模式下,SonicHeaderKeyCacheOffline这个Key是被写死了,一定是SonicHeaderValueCacheOfflineStoreRefresh,也就是既缓存又刷新。
然后又增加了两个Key,eTag和template-tag。其中,eTag是对完整网页文件(.html文件)取SHA1码得到的,template-tag是对模板文件(.temp文件)取SHA1码得到的。
在Local Server模式下,Local Server处理逻辑如下图所示:

新匍京娱乐场手机版 11

Local Server处理逻辑

当服务端返回的状态码为304时,说明服务端无更新,将跳过Local Server层的处理;如果服务端返回的状态码为200,会做执行以下逻辑。首先会分别计算本地缓存的完整网页文件(.html文件)的eTag和请求到的数据的完整网页文件(.html文件)的eTag,如果两个eTag相等,说明数据无更新,将返回头的状态码置为304;如果两个eTag不相等,说明数据确实有更新,但不确定是模板更新了还是数据更新了,所以要分别计算本地缓存和本次请求数据的模板文件(.temp文件)的template-tag。如果两个template-tag不相等,说明模板有更新,将返回头中的template-change Key置为true;如果两个template-tag相等,说明模板不变,数据有更新,就将返回头中的template-change Key置为false。
经过Local Server层的处理后,Sonic内核就能按照返回头中的指令继续执行下一步操作了。

加速原理

网络连接优化
CDN(Content Delivery Network)实际上是通过摆放节点服务器是的在现有互联网基础上形成了一个虚拟网络,可以通过智能分析更好的平衡网络请求,使用CDN来优化网络连接应该算是一种比较通用的方法了。

静态自适应布局
根据不同设备的具体情况,自动布局,对百度这种公司来说,面向的用户来自互联网的不同角落,使用的设备也是各式各样,自适应布局非常重要。

首屏
优先加载首屏资源,特别对于可见资源要有限加载,不可见资源只是在触发是加载,对于非首屏资源,不加载,直到进入可视区域。

资源缓存
包括图片、脚本、字体文件等,所有资源都采用统一cache域名。

资源加载顺序控制
根据组件的生命周期和加载优先级合理调配,就像上菜一样,菜没上,先上一碗饭就不好了。

Pre-rendering
预渲染页面,预先取得加速框架的JS/CSS等

图片优化
图片占整体资源的比例达60%,使用Guetzli压缩,使用WEBP格式

Dom Storgage(Web Storage)存储机制

2.0新特性—Cache-Control

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

上面引用的是官方wiki上的原话。但是从iOS端的源码来看,并没有找到引用的内容,这段话可能是针对Android端的。这个Cache-Control功能目前在iOS端的主要表现为以下几个点:

  • iOS中没有找到Cache-Control使用max-age、private、public三个值。猜想这三个值应用在Android里面。
  • iOS的Cache-Control使用的是no-cache、 no-store、 must-revalidate三个值,这三个值都是不要缓存的意思。
  • iOS生命周期用的是cache-expire-time和max-age。cache-expire-time是到期的时间戳。max-age是缓存的有效期。

下篇《VasSonic 2.0 iOS端分析(二)》
见:
主要内容:

  • 整体结构
  • 主要的类
  • 主要流程——首次加载
  • 主要流程——完全缓存
  • 主要流程——数据刷新
  • 主要流程——模板更新
  • 优缺点及适用场景

开发工具集

也开源了。

Web SQL Database 存储机制

郑重声明:本文版权归新匍京a奥门-最全网站手机版app官方下载所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。