饿了么跨端框架升级mist3.0--贤哲.pdf

1、Mist 3.0-饿了么跨端框架升级饿了么跨端框架的前世今生3黄晓哲饿了么-消费者技术部-跨端容器负责人（贤哲）演讲嘉宾目录01 Mist发展历史Mist 覆盖场景Mist 1.0和2.0的发展02 Mist 3.0的总体思考面向未来的挑战解决应对的思考与设计03 当前阶段成果体验：店铺页超越秒开的极致体验跨端：通用能力下沉，搭建能力上浮渲染：对接鸿蒙底层接口，支持鸿蒙渲染引入JS：进一步突破语法和体验的瓶颈01 Mist 发展历史Mist 覆盖场景Mist 1.0和2.0的发展跨端UI动态化技术 覆盖多端核心链路饿了么首页饿了么店铺页蜂鸟众包首页蜂鸟众包详情商家经营页商家订单页页面拆解为区块

2、区块的组织由前后端搭建数据协议驱动区块内定义了一套类React语法特点：声明式、状态驱动Flexbox布局性能接近原生 Mist 示例典型流式布局Mist代码示例基于 JSON 的语法不像编程语言需求动态化率低能力难复用，组件重复研发不同页面重复做性能优化调试困难 新容器沉淀通用能力独立容器支持不需搭建的场景升级DSL，支持类TS语法共建IDE，丰富功能 Mist 1.0 2.0 覆盖三端；原生代码量80%；需求动态化51%90+%，页面秒开2s1.3s面向未来的挑战解决应对的思考与设计02 Mist 3.0的总体思考时代的变化不同生态不同形态MetaverseVision Pro空间计算/元

3、宇宙领域的动态技术H5RNFlutterWeex 2.0LynxKMM出品W3CMetaGoogle阿里字节JetBrainsUIWebReactWidgetWeb子集Web子集Compose开发语言JSJSDartJSJSKotlin渲染自绘平台渲染自绘自绘平台渲染/自绘自绘技术SwiftUIJetpack ComposeArkUI出品AppleAndroid华为编程范式声明式+状态驱动声明式+状态驱动声明式+状态驱动开发语言平台KotlinArkTS跨端技术汇总系统UI技术汇总JS作为开发语言更易接受自绘渲染逐渐成为趋势声明式、状态驱动成为共识一周一版 饿了么的形势 客户原声达成极致用户体

4、验的目标减少鸿蒙系统下迁移成本Android和iOS端不一致不同页面的技术栈不同，导致无法在一个团队内闭环UI动态化诉求减弱更极致的用户体验鸿蒙等端研发成本和一致性打破Mist与前端技术的壁垒极致体验未来多生态多形态跨端诉求增强，关注多端研发成本和一致性。技术栈制约，无法业务内聚合体验、跨端和前端生态协同：短期：挑战页面直出体验，通过鸿蒙项目完成跨端架构，引入JS运行时贴近前端。长期：升级自绘渲染，向下扩展多生态多形态，向上贴近前端生态，更好协同。坚持声明式、状态驱动的编程范式 解决应对策略 体验：店铺页超越秒开的极致体验跨端：通用能力下沉，搭建能力上浮渲染：对接鸿蒙底层接口，支持鸿蒙端渲染引

5、入JS：进一步突破语法和体验的瓶颈03 Mist 3.0当前阶段成果体验：基础体验保证典型流式布局体验：店铺深度优化 接口解耦并行提前 搭建协议内置 模板预解析 模板字节码 View预创建优化前优化后体验：模板字节码优化01002003004005006007008005597882,3034,19115,92144,29876,417121,1991,715,538JSONBytecode解析前移到编译期模板越大效果越好耗时（ms）模板体积Byte部分优化上线 线上APM 85分位1252ms887ms新旧架构线下录屏（转场开始）566ms400ms体验：店铺优化效果基础层C+or Rust

6、？业务层JS or C+？C+作为基础层跨端方案，通用能力尽量下沉TS作为业务层跨端方案，搭建作为可选能力上浮到TS层C+基础设施建设跨端：通用能力下沉，搭建能力上浮业务代码跨端率达到90%容器层代码跨端率46%两种对接方案。起初起初只能基于前一个联调阶段性能问题愈发明显华为开放了ArkUI Engine C-API，性能更优，调整方案ArkUI分层对接渲染：对接鸿蒙底层接口，支持鸿蒙渲染抽象出UI渲染的5个原子操作RenderNode树一一映射RenderElement树完