作者：邱计(纪学)

饿了么 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 个小程序为例比照线上优化前后成果：

待优化问题及瞻望

问题：

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

2、Render 预加载能力仍待反对欠缺；

3、局部节点的优化针对端凋谢业务三方小程序并未齐全反对。

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

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