在2017年1月12日 Weex Conf 2017上,来自来自阿里巴巴天猫事业部的伯禹带来了题为“基于Weex的双十一会场搭建之路”的演讲,本文从大规模会场的挑战开始引入讨论,然后讲解了大规模会场的电商解决方案,接着分析了Weex与搭建体系的融合,最后重点分享了Weex会场秒开的实现过程,并简要进行了总结。
以下是精彩内容整理:
大规模会场的挑战
- 2016双十一期间,天猫业务共上线1200+个会场,总计3500+张页面;
- PC、H5、Native(iOS + Andriod) 全终端覆盖;
- 一天一小促,一周一大促,月月双十一;
- 营销活动业务特点:高频度、大规模、多终端。
面对这么庞大的规模、频繁的运营节奏,我们在业务成本和研发效率上遇到了很大的挑战。
大规模会场解决方案
会场页面重表现、弱交互,大部分采用单栏布局形式,都是块状的内容形态。基于这样的特性,我们整理出思路及目标。
- 思路:以模块化方式解构页面;基于模块,以搭积木的方式制作页面。
- 目标:面向普通运营人员,实现可视化搭建;页面从搭建到上线,0开发资源投入。
假设每一个内容都是一个模块,模块主要由四部分元素组成:javascript+css、xtpl模板、JSON Schema以及模块描述信息。
与传统模块化设计理念不同的是,我们在设计之初就想到要做多终端支持,做到数据与模板分离,多终端数据共享。
图为大致的页面上线流程。从搭建平台开始,做模块设计拼装页面,然后将页面模板和页面数据推送到云存储服务中,同时产生页面url,当拿到url进行访问时,会路由到源站。
后台可以清楚的看到页面是由若干模块组装而成,可以在后台进行模块的添加、删除、移动等,同时,我们提供一套所见即所得的数据可视化编辑,当一个业务场景下需要调整页面中某一块内容时,只要点击对应位置,就会呼出对应数据集。
搭建平台后的运行效果如下:
- 2016双十一,天猫业务99%的会场基于可视化搭建;基于100个模块共搭建出1200+个会场;
- 经过一年多的运行,天猫业务在搭建平台沉淀了了600+个模块,覆盖天猫90%的日常营销活动;
- 日常营销活动,前端资源投入:0。
Weex与搭建体系的融合
模块的多终端支持,可以支持PC、H5、Native。
基于Weex的native端模块设计如图,在模块进行构建后,我们会把它转化成一份JS Bundle,才会真正保存到入口文件里。通过这样的设计,我们做到了一次搭建,产出三端,并且三端的url是同一个。
Weex会场秒开的分析与实现
秒开是指1秒内页面首屏达到可交互状态,即页面加载时间 + 首屏渲染时间 ≦ 1s。
围绕着渲染链路过程,我们针对每一个节点都设计了对应的优化策略。
网络链路优化
HTTPDNS是基于HTTP协议面向无线端域名解析服务,它的优势是防止域名劫持,更精准的调度,更小的解析延迟和波动,额外的域名相关信息。
HTTP/2是全双工数据流多路复用,可以显著提升网络传输效率,目前天猫大多数域名都支持HTTP/2。
资源下载优化
资源预加载是实现秒开的核心手段,用户访问前,将页面静态资源打包提前下载到客户端;用户访问时,将网络IO拦截并替换为本地文件IO。页面是在搭建平台产出,搭建平台要负责对页面静态资源进行打包,通知客户端更新,实现整条链路的串通。
图片自适应是根据用户端信息(设备DPI,网络状况,WebP支持等)加载最合适的图片,主要利用CDN能力,CDN提供图片裁剪、压缩等,且都不要事前进行,只需在图片请求时添加固定的后缀就可达到一定的效果。
页面渲染优化
页面渲染优化有以下四个建议:
1. 优先使用<list>;
2. 尽可能细粒度拆分<cell>;
3. 首屏优先渲染;
4. 尽可能减少dom层级。
大部分的无限页面采用滚屏的方式,我们提供两个组件scroller和list。Scroller支持垂直滚动,所有子组件一次性渲染;而list也支持垂直滚动,仅渲染可视区域的子组件,且子组件移出可视区域后内存回收。所以,优先选用list。
尽肯能细粒度拆分<cell>,优化原理如下:
1. 过大的cell如果仅部分内容移出到可视区域之外,不会进行内存回收。粒度越小,内存利用率越高。
2. cell与cell之间独立渲染,且cell默认以tree的模式解析。粒度越小,内容呈现越快。
首屏优先渲染:
1. 拆分页面:首屏 + more,首屏首先渲染;
2. 通过loadmore事件初始化首屏以下模块。
总结
双11期间天猫业务:
• 总计上线1200+会场,其中支持Weex的会场占比99.6%;
• 强网环境下(wifi+4g),weex会场秒开率均值到达84%。
双十一期间Weex使用状态达到了高效率、高性能、高可用的效果。在效率层面,通过页面可视化搭建的设计,来大面积的提升业务生产率,释放了开发资源;性能层面,通过网络链路的优化,实现秒开率84%的效果;可用性层面,会场覆盖率达到99.6%。