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

  • 时间:
  • 浏览:5
  • 来源:uu快3输钱_uu快3赢钱诀窍_豹子

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



双11期间天猫业务:



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

面对没人 庞大的规模、频繁的运营节奏,我们歌词 都都在业务成本和研发下行下行速率 上遇到了很大的挑战。



首屏优先渲染:

Weex与搭建体系的融合

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

以下是精彩内容收集:

大规模会场处里方案

页面渲染优化

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

会场页面重表现、弱交互,大每种采用单栏布局形式,不是块状的内容价值形式。基于从前 的价值形式,我们歌词 都都收集出思路及目标。

网络链路优化

大规模会场的挑战

总结





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



1. 过大的cell机会仅每种内容移出到可视区域之外,过多再进行内存回收。粒度越小,内存利用率越高。



1. 优先使用<list>;

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

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



模块的多终端支持,都时需支持PC、H5、Native。

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

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

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





资源下载优化

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

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



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

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

2. 尽机会细粒度拆分<cell>;

4. 尽机会减少dom层级。

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

3. 首屏优先渲染;

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

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

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



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

大每种的无限页面采用滚屏的妙招 ,我们歌词 都都提供有有八个组件scroller和list。Scroller支持垂直滚动,所有子组件一次性渲染;而list也支持垂直滚动,仅渲染可视区域的子组件,且子组件移出可视区域后内存回收。就说就说,优先选着list。



Weex会场秒开的分析与实现

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

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