基于Weex的双十一会场搭建之路

简介: 在2017年1月12日 Weex Conf 2017上,来自来自阿里巴巴天猫事业部的伯禹带来了题为“基于weex的双十一会场搭建之路”的演讲,本文从大规模会场的挑战开始引入讨论,然后讲解了大规模会场的电商解决方案,接着分析了Weex与搭建体系的融合,最后重点分享了Weex会场秒开的实现过程,并简要进行了总结。

在2017年1月12日 Weex Conf 2017上,来自来自阿里巴巴天猫事业部的伯禹带来了题为“基于Weex的双十一会场搭建之路”的演讲,本文从大规模会场的挑战开始引入讨论,然后讲解了大规模会场的电商解决方案,接着分析了Weex与搭建体系的融合,最后重点分享了Weex会场秒开的实现过程,并简要进行了总结。

以下是精彩内容整理:

 

大规模会场的挑战

  • 2016双十一期间,天猫业务共上线1200+个会场,总计3500+张页面;
  • PC、H5、Native(iOS + Andriod) 全终端覆盖;
  • 一天一小促,一周一大促,月月双十一;
  • 营销活动业务特点:高频度、大规模、多终端。

面对这么庞大的规模、频繁的运营节奏,我们在业务成本和研发效率上遇到了很大的挑战。

 

大规模会场解决方案

会场页面重表现、弱交互,大部分采用单栏布局形式,都是块状的内容形态。基于这样的特性,我们整理出思路及目标。

  • 思路:以模块化方式解构页面;基于模块,以搭积木的方式制作页面。
  • 目标:面向普通运营人员,实现可视化搭建;页面从搭建到上线,0开发资源投入。

163b1e828016d5619e9f3d9714f614ce4dcf6b41

假设每一个内容都是一个模块,模块主要由四部分元素组成:javascript+css、xtpl模板、JSON Schema以及模块描述信息。

与传统模块化设计理念不同的是,我们在设计之初就想到要做多终端支持,做到数据与模板分离,多终端数据共享。

a26b9dd607e15f631ee1c9bbe0cb68ce6806b505

图为大致的页面上线流程。从搭建平台开始,做模块设计拼装页面,然后将页面模板和页面数据推送到云存储服务中,同时产生页面url,当拿到url进行访问时,会路由到源站。

dc4f1c6de55f4246035b7ad33c79b114e3267c9d

后台可以清楚的看到页面是由若干模块组装而成,可以在后台进行模块的添加、删除、移动等,同时,我们提供一套所见即所得的数据可视化编辑,当一个业务场景下需要调整页面中某一块内容时,只要点击对应位置,就会呼出对应数据集。

搭建平台后的运行效果如下:

  • 2016双十一,天猫业务99%的会场基于可视化搭建;基于100个模块共搭建出1200+个会场;
  • 经过一年多的运行,天猫业务在搭建平台沉淀了了600+个模块,覆盖天猫90%的日常营销活动;
  • 日常营销活动,前端资源投入:0。

 

Weex与搭建体系的融合

模块的多终端支持,可以支持PC、H5、Native。

f329a1bf5fa04bea6e27880bd11a675c40f751f4

基于Weex的native端模块设计如图,在模块进行构建后,我们会把它转化成一份JS Bundle,才会真正保存到入口文件里。通过这样的设计,我们做到了一次搭建,产出三端,并且三端的url是同一个。

 

Weex会场秒开的分析与实现

e843a51751f0b5192f15d5a5cf7edacb24acb2c7

秒开是指1秒内页面首屏达到可交互状态,即页面加载时间 + 首屏渲染时间 ≦ 1s。

b566dd0785c0d6dec6137793dea43e1e5bce6597

围绕着渲染链路过程,我们针对每一个节点都设计了对应的优化策略。

网络链路优化

8dd8f218954a18d707611c75151af2c1dfd0936d

HTTPDNS是基于HTTP协议面向无线端域名解析服务,它的优势是防止域名劫持,更精准的调度,更小的解析延迟和波动,额外的域名相关信息。

37141fdee419d0f1af358a10c47fd6a1c32ea59d

HTTP/2是全双工数据流多路复用,可以显著提升网络传输效率,目前天猫大多数域名都支持HTTP/2。

资源下载优化

18a7d6398acbed1a48ddbc5f11150ec38811ee07

资源预加载是实现秒开的核心手段,用户访问前,将页面静态资源打包提前下载到客户端;用户访问时,将网络IO拦截并替换为本地文件IO。页面是在搭建平台产出,搭建平台要负责对页面静态资源进行打包,通知客户端更新,实现整条链路的串通。

dc8694a76ed6316038da0fb930ea6307a83d99a1

图片自适应是根据用户端信息(设备DPI,网络状况,WebP支持等)加载最合适的图片,主要利用CDN能力,CDN提供图片裁剪、压缩等,且都不要事前进行,只需在图片请求时添加固定的后缀就可达到一定的效果。

页面渲染优化

页面渲染优化有以下四个建议:

1. 优先使用<list>;

2. 尽可能细粒度拆分<cell>;

3. 首屏优先渲染;

4. 尽可能减少dom层级。

071576d08c2c902baf58fe8e8448f96bd3737c10

大部分的无限页面采用滚屏的方式,我们提供两个组件scroller和list。Scroller支持垂直滚动,所有子组件一次性渲染;而list也支持垂直滚动,仅渲染可视区域的子组件,且子组件移出可视区域后内存回收。所以,优先选用list。

1e959eb97431dbc6cce59404f5f6ccdf8e9eab58

尽肯能细粒度拆分<cell>,优化原理如下:

1. 过大的cell如果仅部分内容移出到可视区域之外,不会进行内存回收。粒度越小,内存利用率越高。

2. cell与cell之间独立渲染,且cell默认以tree的模式解析。粒度越小,内容呈现越快。

a7fff64d8387a8dfba0ea8af05c7c93f887727cd

首屏优先渲染:

1. 拆分页面:首屏 + more,首屏首先渲染;

2. 通过loadmore事件初始化首屏以下模块。

 

总结

双11期间天猫业务:

• 总计上线1200+会场,其中支持Weex的会场占比99.6%;

• 强网环境下(wifi+4g),weex会场秒开率均值到达84%。

双十一期间Weex使用状态达到了高效率、高性能、高可用的效果。在效率层面,通过页面可视化搭建的设计,来大面积的提升业务生产率,释放了开发资源;性能层面,通过网络链路的优化,实现秒开率84%的效果;可用性层面,会场覆盖率达到99.6%。

 

相关文章
|
移动开发 weex 双11
Weex动态化方案与双十一实践
在2017年1月12日 Weex Conf 2017上,来自手机淘宝移动平台Weex团队的凝砺结合淘宝实际业务分享了Weex动态化方案和双十一实践,本文先介绍了Weex的整体架构,接着重点分享了Weex在双十一会场上的实践,最后谈及了Weex的业务支撑,包括AliWeex等。
10241 0
|
6月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
406 2
|
6月前
|
移动开发 前端开发 weex
移动端混合开发技术:React Native、Weex、Flutter 之争
在移动应用开发领域,React Native、Weex 和 Flutter 是备受关注的混合开发技术。本文将对它们进行全面比较与评估,以帮助开发者做出明智的选择。我们将从开发生态、性能、跨平台能力和易用性等方面进行比较,为读者提供全面的参考和指导。
|
6月前
|
移动开发 Dart 前端开发
移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动应用的开发已经成为现代社会中的重要一环。本文将比较并评估三种主流的移动端混合开发技术:React Native、Weex和Flutter。通过对它们的特点、优势和劣势的分析,帮助开发者在选择适合自己项目的技术方案时做出明智的决策。
|
6月前
|
移动开发 开发框架 前端开发
移动端混合开发技术探析:React Native、Weex、Flutter的比较与选择
随着移动应用开发的高速发展,混合开发技术成为了一种备受关注的选择。本文将对移动端混合开发技术中的React Native、Weex和Flutter进行比较与探讨,分析它们在性能、开发体验、生态系统和跨平台支持等方面的差异,以及如何根据项目需求进行选择。
217 1
|
移动开发 JSON JavaScript
weex开发 - VS Code解除格式警告
weex开发 - VS Code解除格式警告
118 0
weex开发 - VS Code解除格式警告
|
移动开发 JavaScript weex
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
307 0
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
|
weex-ui 移动开发 JavaScript
weex开发-使用weex-ui绑定事件源注意事项
weex开发-使用weex-ui绑定事件源注意事项
149 0
|
移动开发 JavaScript weex
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
208 0
|
移动开发 编解码 weex
weex开发 - 加载index.js崩溃,白屏(may it has been destroyed so method:fireEvent is ignored,Url must be passe)
weex开发 - 加载index.js崩溃,白屏(may it has been destroyed so method:fireEvent is ignored,Url must be passe)
350 0