饿了么小程序容器首屏秒开优化实践 - 阿里巴巴移动技术 - OSCHINA - 中文开源技术交流社区

作者：邱计(纪学)

饿了么APP在阿里本地生活业务场景中作为用户体量最大、业务面最广的超级流量入口之一，其所承担的角色和重要程度不言而喻。随着小程序技术作为一种越发成熟和稳定的商业解决方案被越来越多的业务方选择使用和投放，在这样的大背景下本地生活的小程序容器应运而生。

小程序容器在饿了么APP中充当了所有小程序业务运行的基石，其性能和稳定性表现也成了大家所关注的焦点，本文将从首屏秒开的角度剖析过去一年小程序容器在饿了么APP中的性能优化实践。

本地生活小程序容器（Lriver）是基于阿里技术体系下的小程序容器基础能力（Triver/Ariver）建设而成。作为本地生活小程序容器平台层，Lriver灵活定制和支持了本地生活场景下的诸多能力包括 路由、包管理、导航栏、业务组件/API扩展、数据存储、性能优化等，具体层级结构如下：

我们先大致了解下小程序首屏展示的整个过程，优化前的小程序首屏加载过程基本是按照如下时序图步骤串行加载：

小程序首屏加载时序图（优化前）

在确定可优化节点及优化方案时基本是按照用空间换时间、串行改并发、预处理、特殊场景专向优化等方向和思路进行，可以看到下面（step3～step13）着色的节点均具备可优化空间。

针对可优化的节点经历过去一年的针对性优化结合小程序基础容器优化能力形成最终的如下加载时序图：

小程序首屏加载时序图（优化后）

1、包和包信息（前置预请求、APP内预置、异步更新）

如上时序图所示，将小程序和Appx包通过Orange配置提前至APP启动后的闲时预请求后，放入缓存池中待后续打开小程序时直接命中包信息和包缓存，可省去网络请求耗时阶段直接进入包加载阶段。同时将一些小程序通用资源或框架（Appx1.0）预置在APP内，可以进一步提升包信息/包缓存的命中率。

在所有包信息加载过程中，会辅以过期更新策略提升触发小程序异步更新的时机，避免同步阻塞式等待。基础容器也会配合ZCache缓存管理能力支持闲时、定时、主动推送等更新。

2、Render创建、资源加载（前置预创建、资源前置分阶段预加载）

在APP启动后闲时和小程序关闭后，均会触发Render的预创建及Appx资源的单独加载，放入缓存池中待下次打开小程序直接复用，且仅限当次打开的首个小程序有效（参考上述时序图）。

Render预创建后会预先加载Appx资源（jsbridge.js、Appx.mini.js、Appx.mini.css、es6-promise.mini.js等）。此阶段主要省去Render的创建和Render加载本地磁盘Appx资源的耗时过程。

3、Worker创建、资源加载（前置预创建、资源前置分阶段预加载）

在APP启动后闲时和小程序关闭后，均会触发Worker的预创建及Appx资源的单独加载，放入缓存池中待下次打开小程序直接复用且仅限当次打开的首个小程序有效（参考上述时序图）。

Worker预创建后会同时创建2个JSContext（A和B）分别用来即时加载JSCBridge.js和Appx资源(af-Appx.worker.js)和后续打开小程序时加载具体的包资源（index.worker.js），B JSContext加载完成后会将A JSContext中的Appx环境上下文拷贝到B JSContext，以完成小程序整个Worker环境初始化加载。此阶段主要省去worker的创建和worker加载本地磁盘Appx资源的耗时过程。

4、首屏接口预请求（前置预请求）

通过前置首屏接口请求可有效缩短首屏数据加载时长，加快首屏秒开体验，具体过程如下：

5、首屏渲染（加载首屏快照）

通过将首屏渲染成功后保存页面 HTML 快照，在未来启动时首先渲染和展示快照，缩短小程序页面首次可见时间，提升用户体验。可以事先在小程序包中预置小程序首屏快照HTML文件，这样可以保证首次打开小程序首屏可见时间。

6、Appx框架（Appx2.0）

目前本地生活小程序容器已适配支持业务方投放基于Appx 2.0开发的小程序，Appx 2.0框架相比1.0从业务渲染性能和内存占用上均有大幅下降；从架构层面支持彻底解耦render和worker使得后续的极速启动和Snapshot2.0得以有效实现。针对Appx 2.0带来的改进饿了么端也将在后续版本中持续跟进优化期待整体性能比Appx 1.0小程序体验更好。

研发阶段和线上数据监控

容器会通过 核心链路性能埋点上报 和 首屏启动性能检测工具 这2个方面来监控小程序首屏数据性能表现。在研发阶段通过收集容器启动链路耗时信息，辅助发现小程序总体性能表现及各个阶段性能耗时占比，以便小程序上线前及时发现性能瓶颈点，有助于针对性排查优化。同时，饿了么端也支持结合IDE生成的小程序链接，借助阿里小程序性能检测平台上报性能数据分析性能瓶颈点并给出优化建议。

1、饿了么APP端性能辅助检测工具

2、阿里小程序性能检测平台

3、线上小程序平均耗时统计

以饿了么首页 休闲玩乐、丽人/医美 2个小程序为例对比线上优化前后效果：

小程序名称 首屏可见耗时（2021.02.19~02.22）均值 首屏可见耗时（2021.08.19~08.22）均值 提升效果 休闲玩乐 1320ms 850ms ↓35.6% 丽人/医美 1218ms 823ms ↓32.4%

待优化问题及展望

问题：

1、Appx 2.0 各项性能需要做针对性优化；

2、Render预加载能力仍待支持完善；

3、部分节点的优化针对端开放业务三方小程序并未完全支持。

以上优化项（Render/Worker预加载除外）在过去一年中支撑饿了么APP端小程序业务在618、717、双11、双12等大促期间平稳运行，并带来了比较显著的首屏秒开体验提升。后续即将上线的Render/Worker预加载、Appx 2.0的优化能力将会给本地生活小程序容器带来持续更好的秒开体验，并在接下来的端开放业务中逐渐惠及应用到三方小程序中去。

关注【阿里巴巴移动技术】微信公众号，每周 3 篇移动技术实践&干货给你思考！