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 更多技术 货 欢迎关注“美团技术团队” 软件开发 美团校招 程师(前端&移动端)

trang chủ - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-05 16:39
浙ICP备14020137号-1 $bản đồ khách truy cập$