美团 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. 更多技术干货
欢迎关注“美团技术团队”
欢迎加入
美团平台业务容器团队