天天看点

无线动态化解决方案总结:从WeApp到Weex前言无线动态化结尾

入职阿里的两年时间,有幸一直从事无线动态化解决方案。从最初的weapp,到现在的weex,经历了weapp的从无到有,从“辉煌”到没落,见证了weex的崛起,在双十一主会场大放光彩。最近,工作方向有所变化,所以从技术角度谈谈个人对无线动态化的理解,同时也算是对我这两年工作的总结。

业务上的变化根本等不及发版解决,这也是出现动态化方案的根本原因。一套优秀的动态化解决方案应该具备:

简单、友好、强大的dsl

强大的开发工具

debug tool

native 强大的动态能力和高性能

跨平台write once,run anywhere(android、ios、h5 …)

完备的发布平台

规范的开发文档

...

native动态化主要做的事情是:

模板动态化和逻辑动态化

加载性能

滑动性能

水平扩展

接入简单

无侵入性

weapp是一套基于json作为描述语言的跨平台多终端渲染sdk,孵化于无线卖家的业务中。现在回头来看weapp,有了更深的体会:

在正确的时间做了恰当的事情,采用私有协议进行描述,快速落地,但是做了一年没有调整方向(没有转换成标准协议,没有彻底解决逻辑动态性),最终没落。究其原因:

技术视野,当初的技术视野受限

被业务侵入严重,积重难返

架构缺陷,native做的太重(自己写了不太好用的condition等),动态性弱

没有解决“写”的问题,json作描述语言,很难编写和维护

渲染性能,往往实现一个复杂点的组件需要10几层的view,导致滑动性能下降

没有好的开发工具

直到react native的出现才恍然大悟,原来还可以这么玩,把动态性玩的这么彻底,长恭老板的破而后立,这才有了后面的weex———欲练此功,必先自宫(葵花宝典就是这么练成的)

最后说一句,weapp是历史时代的产物,它在当时也支撑了很多业务发展,同时也踩过很多坑,积累了大量无线动态化的经验。

weex本身不是新的技术,而是集大家之所长,react native思想和设计(非常关键)、flexbox布局、v8引擎、vue.js和mvvm的思想组成了最终的weex主体结构。weex从最初的所有的方案设计都会拿weapp的痛点作为参考.

weex native总体架构(以手淘为例)

sdk:专注渲染,只依赖fastjson

ui kit:native的一些通用业务组件,如跑马灯,电梯头等

adapter:三方app的适配器,接入自己app的网络层、埋点工具、导航系统,图片库等

bundle:包含页面容器,拦截规则,模板缓存等

无线动态化解决方案总结:从WeApp到Weex前言无线动态化结尾

原理:同步机制原理比较简单,js framework一次性创建所有的dom树,完成渲染。

不足:当进入a(weex页面)后,快速进入b(weex页面),a页面没法响应点击操作,返回也不能停止渲染,导致js thread 一直渲染脏数据。

适用场景:native局部使用weex instance,并且dom节点较少(不超过100)

原理:采用流式渲染和离屏渲染。

流式渲染:即js framework每创建一个节点,立即发送给native,同时等待native的next tick命令的触发才能继续执行,这样就有效的解决了页面回退仍然在渲染,事件不能响应的问题。

离屏渲染:,即用户在浏览页面的过程中,后台dom线程继续渲染更新页面,将所有adddom、updatesytle等操作都以最小颗粒度拆分,保证所有的操作都在16ms内完成,大大提升首屏的加载性能以及滑动的流畅度。

无线动态化解决方案总结:从WeApp到Weex前言无线动态化结尾

异步渲染机制(摘自weex首架@伊耆)

踩过的坑:

json解析。同步渲染中,会将dom数据一次性发送至native,过大的json数据解析会大大降低加载性能(30kb数据解析需要150ms,手工加入asm后会提升20%~30%性能)

懒加载坑(潜在风险)。页面加载只加载1屏高度的页面,当用户滑动底部加载下一页数据,当用户不滑动时,js将某个组件给remove掉,导致不满一屏高度,页面滑不动。

duktape引擎。最初由于包体积的问题,我们用的不是v8(arm zip1.6m,x86 zip 2m)这是一个标准的轻量级的js引擎,但是3000个节点压测,js执行需要8s。

滑动流畅度。懒加载会导致加载下一页时的大幅度丢帧,因为这一操作没办法在16ms内完成

首屏加载体验。首屏加载的体验很大程度受到节点数的影响

最终的优化方案都是通过一个个坑踩出来的。

weex除了做渲染之外,还可以通过注册module的方式,执行动态js逻辑,比如通过js动态规则下发等逻辑动态性,此处有潜在风险,由于weex全局只有一个context,所以最好不要写全局的function,防止影响到weex相关数据(这个很危险,有可能导致整个weex不可用,问题还很难查),真要用的话,最好写到某个object中,如var mapping = weitao.mapping(){}。

最后,期待@勾股和@鬼道将weex继续搞大,唱响全球。

weex总体介绍有技术细节,请参考weex总架前端大牛@勾股的三篇连载,或者直接骚扰他也行。附上链接

继续阅读