Recce 容器
如果无法正常显示，请先停止浏览器的去广告插件。
1. Recce 容器
突破动态化容器的天花板
美团
融服务平台
2. 录
3. 美团
前端开发的趋势
Hippy
Lynx
Weex
动态化容器是前端
程的关键基
4. 美团
户体验的平衡
5. 定性看前端容器的天花板
晓波不可能三
动态化
开发成本
体验差
不可能
迭代慢
性能
效能
6. 定量看动态化容器的天花板
242ms
React Native
45ms
Native
113ms
?
0
75
初始化
@iPhone 12 mini
150
执
业务逻辑
225
具体的绘制操作
300
7. 可以既要
户体验
要低研发成本呢？
8. Recce 容器 突破动态化容器的天花板
135
React Native
242ms
Native
动态化
45ms
Recce
0
开发成本
15
113ms
75
150
225
体验差
迭代慢
性能
效能
初始化
执
业务逻辑
具体的绘制操作
300
9. 录
10. 对现有容器做很抽象的分类 - 按绘制
式分类
调
系统的 UI 框架
11. 对现有容器的分类做进
建抽象层
UIKit/Jetpack/ArkUI
12. 录
13. Recce 概览
我们想要
个满
性能、安全、动态化 的
❔
UI 框架
时
持
❔❔❔❔❔❔❔❔❔
平台抽象层
❔
❔
Recce Host（Platform Abstraction Layer）
Android
渲染层
❔
iOS
运
案。
HarmonyOS
...
14. 那先选
可以解释执
的语
替代 JavaScript？
：
基于 WebAssembly：
没有什么不可以解释执 的，我们甚 可以阅读 x86 的 进制在浏览器上运 。
WebAssembly 是 套指令集，实现了这套指令集，不需要 Web 环境也可以运 。
*
*
个编程语
解释器我们选择了 wasm3，
这是在不 持 JIT 下最快的解释器。
15. Recce 概览
我们想要
个满
性能、安全、动态化 的
❔
UI 框架
持
平台抽象层
Recce Host（Platform Abstraction Layer）
Android
渲染层
❔
❔
Rust + Wasm3
iOS
HarmonyOS
时
案。
❔
运
持
...
16. Recce 概览
我们得做个上层的 UI 框架编写
❔❔❔❔❔❔❔❔❔
UI 框架
运
时
持
❔
❔
Recce Host（Platform Abstraction Layer）
Android
❔
Rust + Wasm3
平台抽象层
渲染层
。
iOS
HarmonyOS
...
17. Recce UI
18. Recce 概览
我们参考 dioxus 结合 dominator 做了很多的实践与调整。
UI 框架
运
时
持
❔
❔
Rust + Wasm3
平台抽象层
渲染层❓
❔
Recce UI
Recce Host（Platform Abstraction Layer）
Android
iOS
HarmonyOS
...
19. 渲染：站在 React Native 的肩膀上
UIManager Yoga 布局
属性转换 视图组件
React & JavaScript
我们将在下
节讨论为什么不要 RN 的属性转换
RN 设计完善丰富的组件功能
同时还尽可能统 了 Android 和 iOS
20. Recce 概览
追求的极致的性能
UI 框架
运
时
Recce UI
持
Android
场景的
React
QuickJS
Recce Host（Platform Abstraction Layer）
渲染层
泛应
Vue
Wasm3
平台抽象层
提供更
案
iOS
HarmonyOS
...
持
21. 录
22. React Native 的性能瓶颈是什么？
486ms
RN
Native(yoga)
36ms
0
125
250
375
500
去掉 RN 本身启动时间（219ms），添加 3000 个简单节点的耗时（尽可能去掉 JavaScript 相关复杂逻辑）
7%
JavaScript 通过调 本地函数
传递属性数据过程
93%
Native(yoga)
yoga 计算布局时间
+
UIKit 的时间
23. 影响 React Native 性能的瓶颈是什么？
JSObject
folly::dynamic
（处理 JSON 字典）
NSDictionary
（iOS 上的字典）
真正的属性设置
•
•
•
JSON/字典本身的性能
多次的序列化和反序列化
根据字典 Key 值查找
24. 影响 React Native 性能的瓶颈是什么？
RN 很早就意识到了这个问题，并着
解决中。
JSObject
*Props
从创建开始到最终设置
始终使 这个静态的类型。
新版属性设置
这样（测试版）
25. 属性怎么传递（查找）
，
呢？
基于链表
基于哈希表
选择什么 字符串
作为 key 呢？
基于字典
起来简单，
性能不佳。
（如果传递时的载体
是 JSON 字符串，
性能堪忧。）
26. 基于数组
我们借助
个属性定义 成各端代码维护这个索引：
我们在运 前约定好每个属性的索引值。
* 当然会放弃 定兼容性
27. 基于（动态绑定）数组
应
在（第三
）组件注册：运
时绑定
个索引。
* 真的不能在运
* 这可能和 Java 的 String.intern() 有点像。
前获取吗？
28. 完美哈希 - 当我们知道所有可能输
到 Html 表示的富
本：
时考虑最简单的字典。
https://github.com/rust-phf/rust-phf
* 只有在没有任何已知输
应
的字符串
29. 解决跨语
调
- 从 FFI 到 IPC
FFI
IPC
D-Bus
…
没有额外转换
转换调
* 当遇到聚合类型时，转换
约定
需要很多的转换
的转换
作，
如内存空间
通过 WebView
提供的基于字符串
传递的接
式通常有两种：通过增加函数操作外部对象、通过约定编码格式转换。
30. 解决 Recce 内的跨语
...
31. 解决 Recce 内的跨语
属性设置：props_gen
调
成 Recce UI + Vue + React + Android + iOS
+ HarmonyOS 属性操作代码
Rust（wasm3）：扩展 wit-bindgen
持 Wasm3
QuickJS：借助 Rust 宏封装 些本地函数（UI 操作接
） +
定义的
进制读写实现
业务
调
法调
和
档
& 平台抽象层与 Platform 交互：正在使
mako 完成接
成
https://www.makotemplates.org/
https://github.com/bytecodealliance/wit-bindgen
32. Next
调试 & 脚
架
按模块的独
动化测试
由于 Recce 的开放性
有可能实现更多的
把 AOT 抽象
描述
式，
如 Recce UI 原 运
下：
我们已经计算好了样式内容，为什么还需要每次完整传递呢？
既然 WebAssembly 具备线性内存特性，我们完全可以尝试在 CI 上完成
部分的预计算
33. Q&A
更多技术 货
欢迎关注“美团技术团队”
软件开发
美团校招
程师（前端&移动端）