在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%。