Weex动态化方案与双十一实践

  • 时间:
  • 浏览:3
  • 来源:uu快3网站_uu快3充值_玩法

开发体验(devTools

性能监控不是点硬要,不能 通过数据进行不断的调优,以及异常捕获,具体包括以下两点:

2. 定义每个组件;

2. Inspector,不管Native View Element,还是Dom Element,可能Network和console log。

1. 从整体进行组件化分离;

非Push最好的最好的土办法框架Tab可不不能 进行切换,滑动流畅,顶部有电梯帮助运营定位到每2个楼层,还有搜索框,每个Tab的浏览历史记录要被保存;主会场——分会场——主会场时,交互最好的最好的土办法采用Push最好的最好的土办法,不能 持续打开窗口。那么 交互最好的最好的土办法的难点在于内存治理、前向加载实时性。

1. Weex渲染容器降级;





性能监控

2. 异常或渲染错误的捕获:



1. 主链路(首页-店铺-详情-购物车)做一遍操作,让内存缓存占满,记录内存值M0;

有了哪些工具的辅佐,才有今天双十一顺利的排查问题,前端不能顺利的定位页面布局。

会场框架性能篇

会场框架的本质是2个可不不能 用来抽象化描述的框架,底部有Tab,底下有导航,底下有可配置的取款,将模板和与之关联的交互逻辑通过预置的最好的最好的土办法预置在本地,也却说从服务端去请求JS Bundle时,会略过网络请求,仅仅不能 本地渲染,框架模板与数据分离,模板预加载,数据走投放。





初始Weex

2016年双十一会场首次大规模启用Weex,总计淘宝+天猫共1754张会场页面,Weex占比99.6%,约为1747张;在流量最重要的天猫主会场入口,5个Tab不是用Weex进行实现的,并肩,在天猫和淘宝的分会场,基本做到零降级。

Weex分为三层。最上层是DSL,早期你是什么于html、css、javascript你你是什么得话的表达,让前端熟悉表达最好的最好的土办法构建页面;底下层是Virtual DOM,Virtual DOM工作在Framework的解析引擎上,自上而下驱动底层的三端实现;底层分别架构了IOS、Android、H5的RenderEngine,从整个效果来说,Weex是三端一致的正确处理方案,最终各个系统平台上的UI基本上保持一致。

上图为延伸的前后端协同图,后端主要帮助当当我们 怎样才能从Weex源文件构建出JS Bundle,经过transformer进行转移,JS Bundle针对的是业务代码,JS Bundle会部署到后端服务器上;前台同样是三端,可不不能 实施向后端服务器请求JS Bundle,并运行在JS Framework上,底层的RenderEngine是架构在IOS原生的JSCore,Engine上当当我们 用了V8,它会有2个双效通道,可不不能 通过callJS、callNative来发出指令。

通过压测方案如下:

在2017年1月12日 Weex Conf 2017上,来自手机淘宝移动平台Weex团队的凝砺结合淘宝实际业务分享了Weex动态化方案和双十一实践,本文先介绍了Weex的整体架构,接着重点分享了Weex在双十一会场上的实践,最后谈及了Weex的业务支撑,包括AliWeex等。

搭建平台步骤分为以下三步:

Weex是一套高性能跨平台移动开发框架,最大的优势是正确处理了频繁发版和和多端研发两大移动开发痛点。一套代码完美适配IOS、Android、HTML5和Web等多端,极大的提升开发传输时延并肩又保证了用户体验。

• JS Framework加载时间



图中红色标记的是WeexKernel,主要包含UI系统,UI系统包含不要 重要的组件,比如List、Scroller、Slider、Image等15种组件,后续当当我们 会进一步扩展组件,并肩可不不能 就看,在每个Components上还包含生命周期、动画和手势,不能让页面变得更加灵动;基于单个页面有导航Navigator,它不能帮助当当我们 进行页面流转;不同页面之间不能 进行交互,当当我们 提供了全局事件的最好的最好的土办法;并肩当当我们 结合了Network功能,Data Store进行数据存储。

• 首屏渲染时间

3. 把组件有机组合起来。

Weex更多的服务于手淘等超大型客户端,在未来的一年中,当当我们 可不不能 就看在集团结构有不要 的业务对接Weex。

当当我们 不能 在会场框架中,并肩加载5个1000坑位的普通页面,2个全景图会场页面,2个直播会场页面。

2. Weex页面服务端配置降级。

在你你是什么基础上,当当我们 怎样才能设计呢?对于主会场那么 2个特殊模块,采用单实例,从左上角手淘首页进入搜索框主会场,跳转到女装,女装再跳转到男装,男装通过底部导航又可不不能 切出主会场定位到必抢页面,此处实际上共用一份实例;当从必抢进入女装会场时,Weex渲染容器数量不超过5个,保证内存开销可控;前向跳转实时更新,后向返回保存历史记录。

业务接入

业务支撑中心集中在5个方面:降低接入成本、优化开发体验、更完善的性能监控体系、更好的页面搭建平台和优化容灾机制。

1. 性能数据的实时采样:



会场框架氛围篇

以下为精彩内容收集:

双十一分为主会场氛围和分会场氛围。主会场分为造势期、预热期、正式期,造势期不能 保证运营不能实时配置效果,不能 支持动态可配置性;分会场氛围涉及各个行业,每个行业利益点不一样,氛围不能 根据业务来定制。其中,动态性、实效性以及加载性能不是难点。

当然,双十一也并不是一帆风顺,在用Weex设计双十一会场时也遇到了你你是什么困难。大致分为5个维度:页面交互多样化、氛围设置动态化、秒开与性能、容灾机制。

得出结论:

• 网络传输加载时间





在特定的场景下,Weex不能 提供降级的能力,来保障业务。

应用级框架下面是Module,功能的扩展。你你是什么下面做的是整个性能的把控,右侧帕累托图为适配层,主却说网络层图片库的适配、本地的开发环境等。

业务支撑

会场框架交互篇

• 资源请求失败错误

会场框架保障篇

双十一会场实践

Devtools方便当当我们 做两件事:

1. 断点调试;

AliWeex通用模块或逻辑聚合:包括环境初始化,Weex模块或组件的注册,Weex 渲染主流程,降级判定规则等;并肩,AliWeex实现了规范和标准化治理:适配层协议标准化定义,提供默认的接口实现。包括网络库、图⽚库、性能监控等。

现在在业务上应用比较多的是Weex页面根据操作系统、应用、WeexSDK版本进行降级。依赖JSFramework的降级能力,在容器渲染的过程中会经过JSFramework的解析构建,在解析不是比对版本规则,可能命中规则即执行降级,反之正常渲染。



搭建平台

降级预案如下:

2. 进入Weex页面,待页面详细加载完成,跳转至下2个Weex页;

• js 运行时异常

主会场氛围是核心配置驱动(导航栏设置,独⽴tab样式以及URL投放),分会场氛围业务调用NavigatorModule Api,更加灵活。

3. 重复步骤2,让所有的测试场景页进行压栈;全景图-p1p2p3p4-直播-p1p2p3p4。



猜你喜欢

对男朋友提出分手,他对我很好,可是就是对他没感觉了,他来了句,遇见你,就是晴天,,,,霹雳!!!他

你对什儿 回答的评价是?收起更多回答(1)很糙推荐你对什儿 回答的评价是?什儿 什么的什么的问题很糙怪了,曾经就有你讨厌他有时候提出分手,为什么在么在都要问他是就有真的放

2020-01-25

Python使用BeautifulSoup爬取妹子图

下面给出的代码是从首页获取每个分类的地址,有很久 的获取包括图片地址,内容页地址也全部时会大同小异,有很久老是 嵌套就要能了。获取内容页面图片地址以及标题,以页面标题作为文

2020-01-25

忍不了了 我真是不知道怎么表达 我想出轨 不想和现在对象在一起了 怎么才能喜欢上别人

展开完整你对你这个回答的评价是?展开完整展开完整展开完整三思但是 行 我来答使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。收起更多回答(4)愿意处

2020-01-25

mysql 5.7数据库安装部署!

三、创建mysql用户组groupaddmysql&&useradd-gmysql-M-s/sbin/nologinmysql六、设置环境变量echo"expo

2020-01-25

争分夺秒:阿里实时大数据技术全力助战双11

浏览量:1918收藏:2下载数:585所需积分:0所需积分:0下载人数:585立即下载基于淬硬层 学习技术及阿里巴巴多年的海量数据支撑,提供僵化 的内容识别服务,能有效帮助

2020-01-25