美团 ArkWeb 技术实践

1. 美团 ArkWeb 技术实践 ——构建高性能动态化容器美团核心本地商业

2. 主讲人介绍 • 2018年加入美团，曾负责美团小程序容器 iOS 端性能优化。 • 2023年11月美团鸿蒙项目启动后，专注于小程序容器鸿蒙端性能优化。

3. 目录 1. 美团鸿蒙 App 背景 2. ArkWeb 技术简介 3. 美团 ArkWeb 实践 4. 未来规划与展望

4. 背景：美团鸿蒙项目启动 • 2023年8月，华为发布 Harmony OS Next • 2023年11月，美团与华为签订合作协议

5. 挑战：短时间内完成开发 • 2023年12月底，完成首个版本开发，跑通核心流程 • 2024年6月底，完成内测版开发，在华为 HDC 大会上展示 • 2024年8月底，完成商用版开发，9月正式面向用户

6. 挑战：支持丰富的业务形态与交互场景丰富的业务形态图文长列表地图与定位经典外卖点餐页美团打车页面短视频种草直播场景直达到店商家直播带「饭」丰富的交互场景

7. 架构设计：开发基建直接支持已有动态化容器代码资源业务层 …… （已有代码） RN 小程序容器容器视图层（ArkWeb）容器框架基建层（本项目）标准 API 基础组件网络 Web 容器 Mach （ArkWeb） Picasso 逻辑层登录 …… 定位存储美团服务基建系统能力封装工具类基建消息推送图片埋点工具配置下发音视频日志工具 …… …… …… 鸿蒙 OS 层 …… ……

8. 目录 1. 美团鸿蒙 App 背景 2. ArkWeb 技术简介 3. 美团 ArkWeb 实践 4. 未来规划与展望

9. ArkWeb：更高效、更安全的 Web 内核浏览器场景 Web 页面场景小程序场景场景特征：打开三方网页场景特征：打开 App 内网页场景特征：打开小程序 ArkWeb 更高效更安全高效执行高效渲染高效加载浏览安全进程安全

10. ArkWeb：为开发者提供高性能的原生开发体验网页浏览场景 Web 页面场景小程序场景 ArkWeb WebView 加载与导航渲染展示 • 软硬芯优化垂直整合，系统级接口，媲美原生的页面交互体验多媒体安全隐私 …… • 多级高性能接口，提速网络、JS执行、渲染，供应用灵活使用鸿途 Web 内核 Chromium 网络逻辑（Blink、JSVM、扩展）资源执行开发者门户社区答疑渲染 …… 专项团队支持

11. ArkWeb：性能优化技术方向 Web 页面加载流程 ArkWeb 初始化主资源下载子资源下载网络连接应用 Web 内核 JS 执行渲染页面数据下载网络优化逻辑优化渲染优化网络资源预热 Code Cache 增强模板预热离线资源加速 JSBridge 优化页面预渲染预连接本地 JS Code Cache 离屏组件预下载 JS 预编译预取 POST 请求异步 JSB 离线资源注入 NDK 接口

12. 目录 1. 美团鸿蒙 App 背景 2. ArkWeb 技术简介 3. 美团 ArkWeb 实践 4. 未来规划与展望

13. ArkWeb 在小程序容器中的使用视图层逻辑层 • 视图层负责页面展示 V8 WebView • 逻辑层负责执行业务逻辑 • Native 负责处理视图层与逻辑层通信 Native 小程序容器第三方服务器

14. 高效执行：减少通信成本，提升 JS 运行效率 V8 逻辑层通信层编译执行 JS 文件注入桥调用与视图层互相调用 Native 桥通信转发 ArkWeb 视图层编译执行桥调用与逻辑层互相调用 • 基于 NDK Bridge 的桥通信 • 基于 Code Cache 的 JS 执行

15. 高效执行：NDK JSBridge ArkWeb ArkTS JavaScript • C++ 接口降低跨语言产生的重复序列化次数 V8 JS 引擎方舟引擎 V8 JS 引擎 • Async JSBridge 减少主线程阻塞 • FlowBuffer 减少 JS 传输转化开销 OH_NativeArkWeb_runJavaScript() OH_Native_ArkWeb_registerAsyncJavaScriptProxy() ETS 执行入参 ArrayBuffer 共享内存透传 Mojo 序列化传输计算 Hash、创建数据 ClassicScript ETS 执行入参 Napi 类型转换为转换为16位 Mojo 序列化计算 Hash、创建 String std::string std::u16string 传输数据 ClassicScript V8 编译、执行 V8 编译、执行

16. 高效执行：ArkWeb Code Cache Network 线程网络下载 IO 线程主线程发送数据加载 JS • 支持本地协议的 JS 文件地址 Code Cache 接收数据 JS 加载流程 JS 编译 • 可以提前注入 JS 并生成 code cache JS 运行

17. 预创建与复用：减少加载耗时，节约资源占用打开前置页面预热 WebView 打开目标小程序页面复用 WebView ArkWeb WebView 复用池 • 使用离线组件能力动态创建与挂载 WebView • 进入小程序页面前预热 WebView 小程序页面加载完成预热 WebView • 小程序页面打开后预热下一个页面 WebView 离开目标小程序页面回收 WebView • 小程序运行期间复用 WebView 资源

18. 预创建与复用：离线组件离线创建动态挂载 ViewTree • 离线创建 WebView 组件 WebView Container View • 离线 WebView 可在后台进行预渲染离线创建 NodeController View loadURL 后台渲染挂载显示 View • 页面展示时离线 WebView 可动态挂载

19. 同层渲染：支持高性能组件嵌入 WebView embed 标签依赖注入 Native 组件 • 美团与华为联合设计方案页面主体部分为交互要求高的部分为 WebView Native 组件 • 系统能力直接复用，为开发带来便利

20. 同层渲染：动态嵌入 Native 组件 body WebView div p text （背景） ③WebView 与 ②挂载到布局树 Native 组件同层渲染 map ①解析并标记 WebView 组件 Native 组件同层渲染组件（文本）（地图） Dom Tree Render Tree Layout Tree WebView NodeContainer Map WebView Text WebView Map WebView Text

21. 目录 1. 美团鸿蒙 App 背景 2. ArkWeb 技术简介 3. 美团 ArkWeb 实践 4. 未来规划与展望

22. 未来规划与展望 2023年11月初 2024年6月底美团鸿蒙项目启动交付内测体验版 2023年12月底 2024年8月底首个版本开发完成交付正式商用版本 2024年H1 2024年H2 • 搭建前端基建层 • 支持更为完善的业务场景 • 支持外卖、美食、酒店等核心业务场景 • 注重性能优化，体验上优于其他系统

23.

24. 更多技术干货欢迎关注“美团技术团队” 欢迎加入美团平台业务容器团队