Web Compass--端内 Web App 解决方案揭秘

1. Web Compass -- 端内 Web App 解决方案揭秘赵鸿彬（齐誉）阿里巴巴 - 智能信息事业群 - U4 内核研发团队

2. 目录 01 现状与挑战 02 Web Compass 方案揭秘 03 总结与规划

3.

4. 现状与挑战

5. 当前现状图引用自：「100 Cool Web Moments」图引用自：「How Progressive Web Apps can drive business success」 Web 网页级体验越来越好业界逐渐往「Web App」方向发力 • • 设备性能、网络环境等明显提升 Web 引擎能力及体验改善明显 • 纯网页级体验，不能很好满足业务逐步复杂化的诉求 • 前端及容器技术快速发展 • 业界涌现很多优秀方案，如 PWA

6. 面临挑战挑战：优化成本高，能力差异多，体验有上限静态资源动态数据逻辑执行操作体验 HTTP Cache Application Cache Service Worker ... AJAX Worker Local / Session Storage ... Async Simplify ... SPA MPA ...

7. 探索端内 Web App 方案 PWA 类小程序亮点 •标准的 Web App 方案 •ServiceWorker 开发模式 •较多 App 能力：Web Push、App Shortcuts 亮点 •多端投放统一 •统一的应用级样式与操作体验 •新的开发模式，逻辑执行与渲染分离挑战 •能力碎片化，iOS 进展缓慢 •改造成本高，首次性能差 •多页体验未有质的提升 •端内适用性差挑战 •专属 DSL，改造成本高 •逻辑与渲染分离的模式，部分场景不一定是最优选择 •框架相对黑盒能否借助客户端能力，让传统 Web 能低成本达到 Web App 级体验？

8. Web Compass 方案揭秘

9. Web Compass：端内 Web App 解决方案增强能力（统一 SDK）传统 Web 双平台统一端能力融合体验辅助端智能离线包动态数据 Web 容器 JS Worker 资源服务前端增强渐进增强工程化极致体验（低成本方案）高可用高性能全链路打通面向开发者极致首屏流畅操作 U4 内核增强

10. Web Compass：整体架构概览高可用 Web 业务 Web 容器基础模块前端高性能模块增强模式 Manifest 通用预取 App 模式 JS Worker 通用预渲染 JS AOT 策略工程化多进程策略 WebView Pool U4 WebView ... ES6 运行时 ... WKWebView 后端预渲染混合渲染游戏模式高延迟渲染混合渲染 SSR 网络托管 JS AOT JS Bridge 混合光栅化多进程 ESR Lottie 增强性能指标 ... 多 Render 进程 GPU 独立进程资源服务网络库基于 Web Bundles 标准的离线包 SDK 管理平台开发辅助调试工具验收卡口上线监控

11. Web 容器：双平台一致的增强能力 • 自定义 App 模式： Native、Web 混合，提升多页体验 • 端能力融合：将端能力、处理时机、优化策略等与 Web 深度融合，全链路打造更极致体验 • 端能力透出：如通过 JS API 进行扩展，提供端内的分享、长截图等能力 Top Bar WebView Bottom Bar WebView A 配置 Manifest B C 单页模式 • Bar 可选 • Bar 有限自定义样式 • Bar 使用 Native 实现半屏模式 • 自定义高度 • 上拖吸顶 Native / Web WebView … 多 Tab 模式 • Tab 样式自定义 • Tab 使用 Natvie 实现 • 顶部 / 底部自主选择 1 2 ... < WebView > 根据 Manifest 生成 App 模式 Swiper 模式 • 可左右滑动 • Tab 可选 Native / Web 实现 • 顶部 / 底部自主选择半屏 + Swiper 模式效果

12. 资源服务 Web 最需要什么样的「离线」资源方案？更标准标准化的离线包能力弱感知「0」成本的使用方式 • • • • 基于 Web Bundles 标准实现的离线包 SDK 扩充能力，支持边下边用、增量更新等传输能力基于通用缓存架构，无需关注缓存状态扩充能力，支持任意时机进行预取

13. 资源服务：离线包能力基于 Web Bundles 标准的「离线」资源 SDK 图引用自：「Get started with Web Bundles」 Web Bundle 边下边用内存缓存 Manifest 增量更新动态请求断点续传磁盘缓存资源类型传输能力缓存模式

14. 资源服务：通用缓存架构传统方案提前下载资源缓存 • • 优化方案加载资源加载资源 Web 资源请求资源请求 Native 请求拦截网络库 Flutter 网络库资源缓存联网请求联网请求需要感知拦截动作，如前端使用的 Worker 方案性能存在瓶颈，如客户端通过 shouldInterceptRequest 进行拦截提前下载 • • 结合网络库，打通资源缓存机制，开发者无感知方案更通用，能覆盖多端多技术栈

15. 资源服务：通用预取等待完成传统方案：依赖端或者 Worker，链路长且有改造成本端提前处理启动 Worker 执行 JS 发起预取缓存是是否成功否原流程处理查询 / 获取端启动访问 Web 页面加载主文档解析 / 排版执行 JS 加载资源 / 动态数据首屏渲染完成普通请求，如 XHR 访问时发起，无浪费（主文档、数据请求等）端提前处理获取 Manifest 解析预取配置优化方案：性能、效率、服务器负载综合最优解资源服务发起预取网络库资源缓存下一页预取，可以是 Web Bundles、资源、动态数据

16. JS 性能优化图引用自：「JavaScript Start-up Performance」 JS 执行性能 JS Bridge 性能强动态化的 JIT 语言，执行逻辑前，需加载、解析、编译客户端应用常用技术，是否存在性能瓶颈？等处理，存在可优化空间能否优化？

17. JS 性能优化：Ahead Of Time 方案基本能带来 AOT 效果，首次 JS 性能提升 40+% 访问 Web 页面客户端二次访问使用字节码缓存增量更新保存加载、解析、... 加载 JS 数据抽象语法树字节码执行 U4 内核预热下载离线包 / Manifest 端容器读取规则 / 配置本地规则：下发生成规则，本地提前生成离线规则：服务器生成，下发字节码

18. JS 性能优化：优化 Bridge 性能瓶颈去除 UI 线程限制，API 执行耗时减少 30+% UI 线程 (客户端) addJavaScriptInterface X evaluateJavaScript X 执行 Java 实现 Worker 线程 (客户端) Render 线程 (U4 内核) 排队，可能高达几百毫秒注入 JS，执行结果返回逻辑直接返回注入对象调用 JS Bridge API 接收结果 1. 注入 JS，绑定 Java 2. 执行开始 2. 执行结束

19. JS Worker：全能辅助 App 存储多页管理自定义逻辑预测多页数据共享全局存储 ... 多页切换状态同步 ... 自定义预取并行 / 前置逻辑 ... 自主控制端智能 ... …

20. 更多增强能力首屏性能渲染性能互动增强渲染方案预渲染混合光栅化游戏模式 Native Side Render 标准及上屏事件管控高延迟渲染流水线 Lottie 增强 Server Side Render 多 Render 进程渲染高可用 Web AR Edge Side Render ... ... ... ...

21. 高可用全链路覆盖全研发周期覆盖前端、客户端、容器、渲染引擎等多端打通面向开发者提效，如打造 Web 可用性保障和卡口，如白屏、卡死、异常等统一调试能力异常情况尝试自恢复 ...

22. Web 统一调试能力基于 Chromium DevTools 架构 • 复用 DevTools 能力，可快速跟进社区演进 • 兼容多个引擎版本双平台调试能力一致 Devtools Discovery & Inspector • 支持有线（iOS）和无线（Android）调试 • 客户端能力、容器能力、离线包、App 容器、Manifest 等增强调试功能 Web Socket Proxy Server ADB / TCP U4 内核增强模式 • 动态切核 • 内核功能调试 / 分析增强，如首屏性能、多进程等 Devtools Discovery & Inspector Web Socket Local Agent USB / Web Socket Web Engine Web Engine Chomium Devtools 架构 Compass Devtools 架构

23. 总结与规划

24. 小结：开发者友好的 Web App 方案基于传统 Web，低成本投入，即可达到 Web App 级体验传统 Web 开发前端 Compass 增强能力投放客户端 Web 业务 U4 WebView Web 容器 WKWebView 资源服务 JS Worker

25. 实际业务效果首屏耗时达到秒开体验的 Web 业务比例从 30+% 提升至 80+%，部份场景体验接近于 Native 中端机低端机

26. 规划：Web Compass 2.0 更标准、更一体化的一站式前端开发框架带默认推荐，可灵活替换前端开发框架 Compass 增强式 DSL 组件库 Web 容器 U4 5.0 内核： • 框架增强，如 JS Snapshot • 架构升级，如多进程、渲染架构等 • 能力增强，如互动场景、WebXR、多媒体等 U4 WebView WKWebView 资源服务 JS Worker 面向多端融合优化

27. 扫码回复「D2」获取第十七届 D2 演讲 PDF 材料微信扫码关注「U4 内核技术」了解更多 U4 内核技术内幕的分享后续也将推送 D2 会后技术文章，敬请关注！！

28. 感谢大家观看