1、清锐：淘交易前端 瑜晟：淘交易客户端淘系交易终端混合架构 探索与实践录 01 背景 02 标 03 屏性能优化 04 帧率&内存优化 05 总结与展望背景基础交易链路是什么？一条流程链路，流程、节点驱动立足两个核心场景，选到支，支到用购物确认订单付成功订单列表订单详情退款详情极简下单背景业务的特点？成交决策优惠凑单创新型交互产品试错成本核：性能体验核：业务迭代效率打开快滑动阻塞屏性能滑动帧率近 3 年上半财年，同期需求量对202120222023想发就发电商核链路，交易功能属性强背景终端技术侧这些年的变化购物下单订单列表订单详情物流极简下单退款NativeNativeNativeNativeN

2、ative-Native购物下单订单列表订单详情物流极简下单退款Native+Web/WeexNative+WebNativeNative+WeexNativeNative+WeexWeb20132023从纯原开发逐步过渡到多跨端模式，终端技术侧为什么发这种变化？背景客户端遇到的问题？1.挑战：发版效率问题开启 集成BugFix 集成灰 发布灰 发布版本 提审正式版本 放量成为主 版本集成等待时间周期，平均 2 周，特殊情况 2周，甚版可发 业务需求交付周期，旦错过集成点，需要等待2周左右2.挑战：开发效率问题3.挑战三：多端致性问题4.挑战四：尾碎化问题需求 提出开发 完成安卓iOS鸿蒙最版

3、本活跃占70%左右活跃设备数于1000的版本200+安卓iOS活跃设备数于1000的版本近 100最版本活跃占70%左右业务需求新版本验证只能覆盖70%左右户流量，30%庞户体验有损 众多的碎化版本导致在稳定性、兼容性等临极挑战个需求开发多遍，投资源翻倍 多端协同合作成本 双端因为代码不致带来稳定性险渲染逻辑业务逻辑UI动态性，所有UI交互相关变更均依赖客户端发版 缺乏通的UI组件复 在跨平台兼容性、布局复杂性等临挑战缺乏能的复性，能变更均需要发版 缺乏逻辑的动态编排能 传统研发模式，业务逻辑耦合严重，可维护性差2周背景客户端侧架构这些年做的升级？组件化 协议DinamicX 升级新奥创 升级

4、原能 事件链旧石器时代新石器时代铁器时代冷兵器时代热兵器时代端侧在动态化渲染和能上做到了“极致”，是否满当前业务的诉求？200201.纯原开发 2.级维护，不存在 能复 3.动态性1.纯原开发，模块化 和解耦 2.部分UI组件可以复 3.动态性1.组件渲染具备动态性 2.部分双端渲染致性 3.不满W3C标准 4.复杂交互法持 5.业务逻辑不持动态1.部分端侧业务逻辑后 移新奥创配置平台 2.部分标准化事件执 逻辑持动态化配置1.业务逻辑能进步 标准化和原化 2.持动态配置和下发背景新环境下依然临的严峻考验？能力抽象端侧能力编排云端+XMLJSON原子能力视图widget逻

5、辑表达式1.产品形态相对稳定2.交互模式可枚举1.产品形态变更频繁，尤其是创新型交互2.任务重、时间短学习成本表达有限程结构固化能上限低能补充依赖发版能发现使成本最终选型前端案：1个上线极简下单 为例300+时评估Native 案：前端案：近100背景前端案的探索Native 容器+WebNative 容器+Weex 1Native 容器+Weex 2渲染引擎架构绘 UI+W3C 全集Native UI+W3C 集绘 UI+W3C 集渲染引擎可控性低较体验上限?=Native研发效率较低较混合架构标性能体验=Native，研发效率=Web2.滑动帧率：满帧，60FPS1.屏性能：瞬开，350m

6、s3.迭代效率：想发就发，7x24 时可发布Native 业务容器 +Weex2 渲染框架优化屏性能&滑动帧率屏性能现状分析从点击到渲染完成，屏性能问题卡点在哪？导航动画业务请求&渲染容器阶段初始化资源加载从个对视频开始问题分析容器初始化阶段思考容器的初始化是否可以提前初始化掉？JS资源加载阶段业务请求阶段业务渲染阶段思考资源缓存了么？缓存的命中率是否可以更些？思考是否能最早时机的发起业务请求？思考上些固定已知的元素是否可以提前作渲染准备？络资源预取引擎渲染屏性能优化策略机制1.交易业务多，贯穿购中、购后等全链路2.交易是条流程链路，动线清晰交易链路 特点订单详情付成功订单列表确认下单极简下单

7、商品详情购物前节点可以为后节点做更多的预处理屏性能优化络资源预取-资源缓存命中率提升淘统使ZCache将前端资源打包成个ZIP下载到本地，使得户在浏览的时候不需要再去下载资源，有效提升加载性能ZCache 安装式访问时安装提前安装命中率只有60%-70%左右？应该在哪些场景为哪些ZCache做提前安装？核策略交易核流程链路上，为后置链路做资源包的提前安装购物车NatIve下单订单&物流详情我淘直播间极简下单订单3逆向支付成功Weex资源预取调度标准调度预取客户端预取JSBridge预取其他优化效果：命中率95+%屏性能优化络资源预取-业务数据预请求实施1：导航动画阶段络预请求导航阶段接口预请求

8、容器加载页面加载页面发请求匹配缓存页面渲染请求服务端匹配：直接返回数据不匹配 优点：所有渠道均可覆盖 缺点：时机偏晚，导致网络波动下命中率低实施2：前置络预请求首次进入页面滑动预请求本地缓存预请求 管控机制缓存 管控机制 优点：数据准备时机早，体验好 缺点：服务端请求压力1.只针对某些特定条件打开，如 弱、低端机等2.只针对某些请求RT较的业务请 求打开，如订单的物流服务等屏性能优化引擎渲染-容器实例预热核策略交易核流程链路上，前置在闲时为做Weex2实例的离屏渲染预热实例预热池1.闲时，预热实例池2.点击激活预热实例 WeexInstance3.透传业务必备参数给预热实例iOS 低端机收益

9、300ms+安卓 低端机收益 400ms+内存开销4M-7M核机制1.内存告警时机的预热销毁管控机制2.业务优先级的实例调度管控机制空闲态激活态前端可做资源预取低端机收益 200ms+未来给前端在更早时机做更多 闲时的任务处理提供了契机收益成本收益屏性能优化结果视频对效果：前置络预请求线上性能数据*瞬开：350ms（导航动画）内屏渲染完成*秒开：1s内屏渲染完成瞬开率秒开率iOS：70+%安卓：50+%安卓：90+%iOS：90+%帧率优化-问题主要问题：1.Android 低端机掉帧严重，部分区域 20 FPS2.iOS 120Hz 刷屏掉帧，最仅 80 FPS测试设备：Vivo Y67（9

10、8分位）帧率优化-渲染流线VSyncVSync16.6 ms(60Hz)8.3 ms(120Hz)T1T2T3时间阶段主要作T1VSync 信号输T2渲染引擎处理T3渲染结果输出VSyncT=T T T1T2T3掉帧帧率优化-PlatformViewPlatformViewPlatformView绘模块绘模块绘模块绘PlatfromView+HC挖洞VDTLHCPlatformView渲染模式帧率提升iOS 刷Y67110+3545Android 如何进步优化？VSyncVSyncWeex UI 线程APP 主线程WeexRaster 线程全绘blcok12.12.23VSyncVSyncWe

11、ex UI 线程APP 主线程WeexRaster 线程2.12.2blcok132.0帧率优化-绘VSyncVSyncChoreographerLayout 1Weex UI 线程APP 主线程WeexRaster 线程Paint 1LogImgRender Object TreeLayout 2Paint 2最佳实践commit to surfacefligner时间阶段主要作引擎优化业务优化T1VSync 信号输JNI ChoreographerNDK AChoreographerT2渲染引擎处理布局绘制/光栅化业务复杂度字/图/CSST3渲染结果输出SurfaceViewTexture

12、View说明：为便于演示，将 weex 之外的线程统称为 App主线程commit to Composite Raster 帧率优化-最佳实践举例0.729 ms2.306 ms帧率优化-时间&空间内存构成优化式JS数据、props 裁剪DOM节点合并/删除RenderObjectList Cell 回收图库图尺、质量压缩GPU 纹理RasterCache限制，斯模糊三缓存引擎优化其他内存告警，业务功能降级内存分布缓存有缓存内存与渲染时间的平衡帧率优化效果帧率提升iOS 刷110+5560Android 98分位 4055Android 95分位Vivo Y67（98分位）总结与展望体验效率首

13、屏性能iOS 瞬开iOS 秒开Android 瞬开Android 秒开70+%90+%50+%90+%帧率iOS 刷Android 95分位60110+Android 99分位 4055iOS 60Hz5560发布窗口7 x 24 时可发布订单业务为例发版依赖90+%需求 不依赖客户端发版总结与展望底层 能网络库图片库资源缓存监控日志交易 容器性能体验代码预取数据预请求实例预热预渲染交互体验转场体验半屏浮层手势交互动画稳定性白屏监控内存监控性能监控大盘报警研发调试实时日志移动工具调试平台全链路分析渲染 引擎Weex2API 扩展自绘组件扩展业务购物车下单订单物流退款1.业务：规模化应2.个：突破边界订单详情订单列表消息支付成功多渠道极简下单订单半屏浮层独内嵌地址支付成功订单.多形态客户端前端Weex混合架构图感谢THANK YOU