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

Home - Wiki
Copyright © 2011-2024 iteam. Current version is 2.134.0. UTC+08:00, 2024-10-04 08:24
浙ICP备14020137号-1 $Map of visitor$