http://www.ox-holdings.com

APP可以快速加载上次打开动态缓存在本地的页面资源新匍京娱乐场官方下载,那个时候做了一些H5和native混合开发的框

摘要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.

如果要使用持久连接,我们很有可能要经过客户端的加密解密以及组包等步骤,并且要等到整个HTML下载完成之后才能进行显示,我们认为这个时间反而拖慢了性能。

jsbundle不能放在远程,一定要本地内置一个,然后有一个异步更新的逻辑去更新jsbundle;

实际上用户每次打开WebView看到的内容都不一样,Node.js每次返回的数据都是最新的,因此拉回来的数据我们必须让WebView进行reload,这给用户的体验是:明明已经打开了本地缓存好的HTML并且看到内容,但一操作页面却整个reload了。在一些低端机型上WebView reload非常耗时,用户能很明显感觉到整个WebView H5页面白屏一下,然后才刷新出新的内容。

HTTP协议的网络层

SharpP的应用

这两个Crash加起来的占比是0.5%左右,还是比较大的,还有在iOS上有一个imageLoader Crash,这个Crash简单说下就是RtcImgloader有一个逻辑本地缓存时,没有超过200兆就会写本地缓存,如果这个图片本地缓存它的response为Null的话它就会Crash掉,这个占比是在0.05%。

减少提交页面数据

首先在于它的滑动刷新率、滑动性能,如果你不开启removeClippedSubviews属性,在iOS上它的显示树就会把所有列表项都显示出来,这个是可以通过iOS Xcode用调试工具打印出来确认的。当然如果你开启的话,可以把屏幕外的节点不在显示树上显示去实现一个滑动性能的优化,但这个不是最关键的问题。最关键的问题是虽然这里不把它放在显示树,但这个节点还是在内存里,这里就带来一个更严重的问题:当你的ListView无限下拉无限滚动的时候,内存的无限增长的情况怎么去解决?

新匍京娱乐场官方下载 1

最后我们来关注一下RN框架的Crash,主要在Android上有两个Crash一定要在源码上注释掉:

QQHybrid架构

根据我们手Q的统计数据,Android的WebView平均打开启动的速度耗时是0.8秒,有些Android机型基于系统环境可能需要一点多或者两秒左右;

如何统一数据

比如留言板是H5的,它的公用JS只对它这个页面是复用的,因为有增量更新的存在,但对于别的H5页面,比如我们的背景Cover、我的签到,这些H5页面是没有办法跟它共用一份公共JS缓存的。所以这里带来一个问题:异步加载会存在一个损害率,还有前面说到安全的问题。

传统页面的动静分离

比如留言板,不同用户的留言板内容肯定是不一样的,如果没有这个数据的差异,这个留言板页面没有必要展示出来,因为它一定需要用户真正的数据存储才有意义,它不像传统的运营活动页或推广页那样所有人看的都是同一个Banner图或同一个页面,这是第一个问题;

这是我们内部称作快速自动化的工具。我们会把前端所有的测试用例集写成自动化测试,然后每天都会把全网所有页面所有的测试用例集跑一遍,检查功能是否正常。

这里我们分析了我们页面结构,看一下有没有可能做到二次进来时每次只传输数据的层面,我们通过页面结构分析得出页面主要由三个部分组成:

这个技术并不复杂,我个人认为不存在太深的技术门槛,更多的是从客户端、Web到CDN后台这整个链条的打通。但过程中我们也踩了一些坑:我们在灰度的时候发现很多iOS用户来投诉说页面展示时图片不能展示。

二、React Native动态化方案在App内的实践情况

新匍京娱乐场官方下载 2

这里有两个问题:

这样实际浪费了非常大的带宽,所以我们思考CDN是否能根据用户手机屏幕尺寸来下发不同格式的图片。

其实我认为现在这个时代是我们Web前端的幸运,JavaScript提供了很好的土壤,可以用来编写NodeJS、页面甚至App,如果三块都搞定的话甚至可以称为全栈工程师。大家可以看到我前面所分享的内容,绝对不是我一个人或者说一个端就能够实现或者做完这一套的,我们客户端同学会和一直帮我们改造优化WebView、提供RN的框架,NodeJS提供H5页面的成长还有增量更新的能力,JavaScript还有CSS来编写我们Web层还有App层整个UI界面的渲染,可以看到我们整个技术团队的紧密合作和努力。

如何快速把四个版本的数据全部统一?我们针对静态直出这种模式做了小型的自动构建系统,产品经理在管理端配置数据要同步dataServer时,我们会立刻启动我们内部称为vnues的构建系统。

这些改造上线后用户体验和反馈都很好,从我们前端测速表现来看是也是杠杠的,大家关注图中Clickstart的测速点,Clickstart是从用户点击到看到内容的一个计算时间,大家可以看到如果用HTTP的话(白色那一行)它的耗时比较长,需要3、4秒;大家再关注绿色这一行,如果用了并行加载和Socket通道以后它的测速提升是非常明显的,iOS和Android都有一个比较好的提升;

所有的技术选型与框架都是要结合业务形态来选择,大家对QQ会员的业务形态可能有简单的了解。手机QQ中可以说有大概70%以上的业务由H5开发,像会员的主要商城:游戏分发中心、会员特权中心和我现在负责的个性化业务的商城等等。这些商城特点很明显,它们不是UGC生成的页面,是产品经理在后台配置的内容,比如在页面上可以看到的表情和主题等等。

一、H5在QQ空间App里的架构设计

这套系统是基于Node.js搭建的,会把开发所编写的代码文件和UI素材图片等等数据实时生成最新版本的HTML,然后发布到CDN以及同步到offlineServer上,这可以解决CDN的文件与最新数据不一致的问题。

到了现在我们自定义组件已经上基本完成了(Video),下面我们还需要一个容器,这个容器我们选了原生提供的ListView容器,这个容器作为RN框架提供的重要容器,但是我个人认为它的性能实在让我大跌眼镜或者说差强人意:

整个过程中也让我们感到hybrid架构并不像以前大家理解的,只是客户端和前端配合的工作就OK了,在整个架构体系中后台技术也发挥了很大的作用。而CDN改造我们也请教了运维团队的支持,QTA和WPT中也有测试开发团队的参与。可以说整个体系的建立,是所有岗位并肩作战的结果。

实现了网络层的全部托管

这里有趣的现象是离线包的性价比问题,可以看到传统页面使用离线包可以在网络耗时部分节省700多毫秒,但静态直出这种模式使用离线包只能节省300毫秒左右,这是因为使用静态直出在网络过程中所依赖的外部CSS和JS都已经直出到HTML内部了,不需要额外的网络请求,所以其本身网络耗时有所减少,这时使用离线包的收益开始逐渐下降。

离线包+预加载这个架构主要解决的还是静态资源的问题(静态HTML、静态JS、静态CSS它们的加载、它们离线的东西),因为我们本身QQ空间H5架构,它的页面是后端(Node端)去构建的,所以这里存在冲突的问题,而且这个也是由我们业务UCG架构决定的;

我们之前是全网所有用户缓存同一份HTML,现在修正为全网用户缓存的内容都是从真实server里拉回来的页面。

通过H5的增量更新我们实现了40%二次更新的页面比例,由18KB减少到只需要传递8KB的动态数据和模板的差异就可以实现二次更新了。

在打开页面的时候,WebView会自动带上终端的屏幕尺寸以及支持哪些图片格式给CDN节点,CDN节点再从源站获取最新的图片,源站这个时候有可能已经离线或实时生成好对应的图片了。

移动化时代其实需要我们学会变通和快速适应,我个人认为不要拘泥于我们Web前端,而是放眼整个大前端,说不定下一个虚拟化时代就到来了,也需要我们前端同学的一起努力。这需要我们具备扎实的计算机基础、宽广的技术视野,还有我认为最重要的举一反三的学习能力和可以全局看问题的眼光,这样的话我认为前端同学走到哪里都是可以具备高价值的。

新匍京娱乐场官方下载 3

执行jsbundle这里学问比较大,因为jsbundle分两个部分:

这些页面相对传统,在最初的时候,一个传统的H5页面为了提升速度和体验会做一些动静分离的优化,比如页面顶部的banner以及下面我们称作为item的物品区域,这些区域的数据可以由产品经理自由编辑随时更换,我们会通过页面loading之后发起CGI请求,从dataServer获取数据,然后再拼接起来。

还有一些其它节点比如内置的集成JS等等其它代码模块;

在Accept里增加了sharpP的协议头:image/sharpP

所以这里H5要做一个增量更新只有一种可能,就是接下来说的的动静分离方案,我们把用户的页面动态的部分挖出来。比如像留言板,我们把页面的留言列表挖出来;页面的标题也挖出来,因为这可能是跟个人用户信息相关的内容。由这些内容组成Data层(由title和大的body组成),这样就可以保持我们中间静态模板的纯粹性,这个静态模板对于所有用户来看的话都是一样一致的,正是这个静态模板的存在我们也可以实现H5的增量更新。

在请求header里面额外添加了字段,比如User-Agent里添加了“Pixel/750”,如果是480px的机器这个值就变成480;

这里有必要说明为什么我们把它们切成H5,H5作为这么久以来比较常规动态运营的方案,可以解放你的业务特性发展,而且关键是我们手机App迭代周期相对比较长,可能需要一两个月才有一个新的版本发布,这时候我们还是需要可以动态化运营的H5作为承载。当然这些二级入口有数千万甚至上亿的访问量,可以说是国内访问量最大的H5页面之一,但是在我们做完这些功能或者业务模块切换以后,我们的挑战就已经来了,主要问题还是来自于用户体验上的差别,比如我们的留言板做完H5(即把Native切换成H5之后),它的用户活跃度甚至一度下降了10%,这是很可怕的事情。

以下是更形象的过程,在Accept增加字段,然后返回对应的图片:

第三个问题也是我个人觉得最关键的问题,它的更新覆盖率总是没有办法到达100%,离线包的更新是异步的过程,你没有办法保证用户进入的时候一定是更新了你最新的离线包,不能保证是用户的版本是你希望的版本。

新匍京娱乐场官方下载 4

最后是我们业务逻辑即UI渲染这部分,要去做首屏组件的优化,组件层不能做深度嵌套,减少首屏可见的节点个数。

当第二次加载返回的数据就没有前面看到的整个HTML,只会返回大概37KB的数据,这个data实际上就是一个JSON,但它定义了前面对应例如sonicdiff-banner的DOM结构。为了节省H5中执行的代码,我们直接在JSON中把DOM节点代码拼好,这样页面只需要做id的匹配和刷新。

即使需要二次更新时也还好,我二次进来还是可以达到秒开,还是可以看到内容,但可能要过一会才能刷成最新的内容,这个比例是40%多。二次更新和304加起来是50%多,剩下的就是首次加载(本地什么都没有就要第一次加载的情况),这个比例现在看来还比较高,但其实这个跟业务特性有关,我们的留言板业务特性是用户经常发生变化的原因;比如我们的背景Cover的话,它的304比例可以到达百分之八九十,对你的Web应用带宽和流量损耗降到最低。

发布到正式环境之后,我们在外网还有综合评分监控的系统,其首要监控的指标是关于速度的,我们把页面打开的速度拆解为客户端耗时、网络耗时和页面耗时并对它们分别监控。

除了速度方面Native比较好的优势是相对比较稳定,这体现在几个方面:

这个让我们非常惊讶,因为当时还没有把这项技术部署到iOS上,只是Android在应用。我们检查了CDN的代码也没有问题,那为什么会把sharpP的图片下发到iOS用户呢?

从图可以看到我们下拉了200个ListView的节点,内存就到了300MB,我们的iPhone5只有512MB的内存,所以很容易出现内存的问题。

另外这种模式下几乎无法利用WebView本身的缓存,因为后台直出同样在CSS/JS已经全部都在后端执行,WebView很难将一个纯粹的静态HTML全部缓存下来。为了解决上述问题,我们引入了动态缓存的机制。

这时候我们做一个页面的更新(在这里我在留言板回复了一句话),让大家更好理解我们二次更新是什么样,我退出来再重新进入留言板,大家可以看到刚看到的界面是之前访问过没有那条回复的界面,但是过一点时间马上会刷新为有那条回复的界面,这样跟Native的交互体验比较像了,当然这里可能还有一个瓶颈在于你这个二次加载的秒开还依赖于你的WebView启动速度以及页面layout布局耗时,这是我们刚刚所做优化的雏形图:

结合前面提到的静态直出局部refresh部分DOM的经验,我们可以减少网络传输量和减少提交页面的数据量。我们首先做的事情是减少网络传输量,避免refresh的时间太靠后。

至于自身价值而言,我认为自己无法给自己去给做一个估值,与其追求自身价值不如更多地去追求团队价值和用户价值,比如前面说的H5页面进入怎么让用户最快、100%可用、还有流量的节省,其实团队和用户会因你为他们做的事情而为你自己定了价。

另外,从Node.js服务器返回的数据是HTTP流式的,WebView不需要等待整个HTML加载完成后才能进行渲染和显示,只要拿到传输中的first byte就可以开始进行document的解析以及DOM的构造。

HTML改成Socket通道去传输;

这里的流程大概如下,用户从click开始,到launch WebView,WebView去加载CDN上的HTML文件,页面loading起来后才会去获取JSON,为了加速这个过程可能会用到localStroage做缓存,这整个过程是非常传统的静态页面加载过程,相对比较简单。

所以这里需要做分包,把公共的jsbundle分离出来,去做一个预执行,这里可以节省600毫秒左右的时间;

后来分析发现,中国不同地区运营商之间,会做类似CDN Cache的缓存服务。当Android用户第一次请求sharpP图片的时候,运营商的server从我们的CDN拿到了sharpP格式链接。当缓存生效期间内,同一个地区其他iOS用户上来请求时,运营商发现URL一样,直接就把sharpP格式的图片返回给iOS用户。

还有数据加载,这个就老生常谈了,数据结构一定要缓存到本地一份;

每个用户进来看到的内容都是不一样,那么静态直出这种模式行不通了,因为我们不可能把所有用户的页面都在后台生成然后发到CDN上,然而这种模式也有很简单的办法来解决。

保护我们的手机H5异步接口

新匍京娱乐场官方下载 5

先介绍一下目前我们腾讯RN的实践情况,目前我们手机QQ有留言板已经是在做RN的改造;我们手机QQ空间也有话题圈和情侣空间这两个模块也做了RN的切换灰度,目前日访问量数以百万计;还有我们的兄弟部门QQ音乐还有全民K歌,他们也在RN实践上取得好的效果。

整个sonic模式流程如下,看上去比较复杂,但基本原理就是通过Bridge桥接把请求回的HTML分模版和数据进行缓存。

当然我们还是可以看到WebView在这块有变强的趋势:比如我们腾讯内部的QQ浏览器有自研的WebView内核,我们也是自己采用接入并且对它有一些优化;iOS上的话我们也可以看到WKWebView其实也是有一个比较好的优化的,比如页面加载的内存损耗已经变小很多。

新匍京娱乐场官方下载 6

通过以上所有这些优化,我们可以看到跟之前我们用了那套先进的H5加载逻辑对比,在Android上提升很明显,因为Android上WebView实在太慢了,但在iOS上去做提升就见仁见智吧,我觉得也有一定的提升。

在做H5的提速优化时,大家很容易想到我们是否要利用持久连接去避免访问服务器的connect、DNS、握手之类的耗时,像QQ这种客户端它跟后台server是有持久化的连接的。假如用这个连接来向后台服务器请求HTML文件并交给WebView,会不会比临时建立一个connect请求更快呢?我们只需要搭一个反向代理服务就可以从QQ消息后台访问我们Node.js服务器,这个流程是可以打通,但是我们评估认为这种模式未必适合所有的场景。

WebView的HTML页面缓存管理;

除了之前提到的内容之外我们还做了Debug平台,许多调试能力已经提前部署在所有手机QQ终端。我们可以通过远程命令去检查用户的DNS解析情况,命中了哪台server,用户是否受到运营商劫持等等。

首次传输加载体积太大了

新匍京娱乐场官方下载 7

Socket通道

新匍京娱乐场官方下载 8

二次加载体验机制可以完爆H5,这里主要原因其实我们也看到就是缓存的逻辑。

新匍京娱乐场官方下载 9

首次进入的时候如何去提速;

这种模式解决了产品的需求,但引入了新的问题。WebView获取html要请求Node.js,Node.js要进行后台页面拼装,中间的网络耗时和后台运算耗时比我们想象中要大。在这个过程中,整个页面是无法渲染的,用户进入我们商城首页则看到一片空白,产品经理同样无法接受,用户也不买单。

把JS内置到我们的HTML里面

QQ现在每天的活跃用户好几亿,登录峰值差不多十几万每秒,即使一个100KB离线包的更新,发布一次动辄就需要几百GB的带宽,无论从成本还是技术层面都不是我们能接受的事情。

我们这里采用一个比较简单的做法,在前端用JS做一个手动的回收,把屏幕外的节点用一个宽度为1的空View作为一个占位,这样其实就可以达到内存稍微增长没有这么厉害而不至于达到无限制的增长。

我们统计的网络耗时是从WebView load URL开始到页面首行这段时间,实际上包括一部分页面加载,WebView内核的启动,网络组件和渲染组件的加载,所以耗时比较高。

说到这里,前面说的基本都是把HTML、CSS、JS文件通过我们新的传输通道或者一些新的东西缓存到本地达到一个加速的功能。这里还有一个遗漏的东西:除了静态资源和页面以外,我们还有异步ajax接口,这里也可以采用同样的方案,我们最后做的事情把异步读写接口也接入了我们的Socket通道,这个带来的意义主要在于两个:

这种应答机制决定了它每次都需要一个等待的过程,而且socket package的约束造成了每次传输的数据包的大小受到限制,像我们30+KB的数据很有可能要拆成五六个数据包,虽然是利用了持久连接节省了connect耗时,但和server多次来回通讯反而把整个耗时加大了。

但在iOS上就没有这个么好的组件,因为客户端那边没有提供类似的组件,而是对接一个UITableView实现可复用内存可回收的原生组件,耗时比较大,其实我们也做过一个,但是灵活性上会有一些问题,大家可以尝试把UITableView组件作为自定义组件去切换迁移。

reshape架构

客户端在启动WebView的时候同时发起HTML的页面请求,这里可以实现一个效果:本来我的耗时是T1+T2,现在为T1或T2的最大值,这样达到并行加载的效果。

这个案例给了我们额外的启发。我们现网中,Pixel字段有三种取值:480px、640px、750px。我们内部讨论过是否可以把屏幕尺寸直接写在User-Aagent里,这样以后Android出了一些新的屏幕分辨率我们也能在后台做更好的自适应,为每种机型去生成不同格式的图片。

这次很高兴来到这里和各位互联网界的技术同学作一个技术交流,今天我主要讲的主题是《QQ空间面向移动时代Hybrid架构设计》。说到QQ空间,很多人第一印象就是想起以前在QQ农场在空间里面偷菜那段欢乐时光,相信在座也有人在空间中转发过日志,以为自己的QQ等级可以加一个太阳,这些种种其实就构成了我们一个QQ空间的印象。QQ空间作为第一代的社交网络至今发展到现在已经有12年了,它不仅记录我们年轻时候的美好青春,而且还继续承载着下一代年轻人的生活记忆。

我们每天都会输出如下的监控报表来观察每天速度变化,这里我们并不单纯关心全网的性能怎么样,我们更关心慢速用户的体验,例如大于5秒的用户最近占比会有多少。

和之前解释的高速通道是一致的,然后通过offline参数缓存到本地,我们这个公共库文件更新的时候会有一个文件名的变更来实现缓存复用;不支持HTTP Hook的情况我们还是会走HTTPS加载。

在源站里会存储3*3数量的图片,每一张业务图片提交给源站发布的时候,都会生成9张图片。CDN节点会根据WebView的请求,在回源的时候向CDN源站请求对应类型的图片,但对于业务和WebView来看请求的还是同一个链接,这样手机QQ所有的H5页面都不需要任何一行前端代码的修改,就能享受图片格式所带来的尺寸自适应和流量节省。

说到这里增量更新已经说完了,但是我们还统计了一个比较有意思的数据,我们在服务器端(Node层)上报了页面的PV,同时我们在浏览器端(客户端)也做了PV这样的上报,发现一个很有意思的是:到了用户页面的转化率不高,即异步上报和我直出上报的比例不一致,转化率只有93%。但这里我们要怎么办呢?这个问题主要有两个原因导致的:

新匍京娱乐场官方下载 10

我们第一个想到的是做整个HTML页面的离线缓存,我们在这里加了一层Cache层,它会保存用它加载过的HTML页面,WebView启动完后如果Cache层里有昨天访问过的HTML就先把它设置进去,让WebView先有内容显示,最大化打开速度。当这个时候有一个新的内容过来的时候再把这个新的页面刷新一遍,这样跟Native的体验是一致的,就跟我们看到的视频Demo一样:进入说说的时候第一次可能要等一会,第二次进入时马上可以出来,而且上面有转菊花,如果这时候有更新的话也会被刷掉。

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