本文整理自网络，侵删。
启动性能
小程序启动是小程序用户体验中极为重要的一环，启动耗时过长会造成小程序用户流失。
本章节的启动只包括小程序冷启动，不包括小程序后台切前台的热启动。一、启动流程
在进行启动优化之前，先简单介绍以下小程序的启动过程。在小程序启动过程中，主要包括以下几个方面：
- 注 1：小程序启动的这些部分不是串行完成的，会尽可能的并行进行。
- 注 2：小程序启动各部分不是每次启动都完整进行的，会尽可能的利用缓存。
1. 资源准备
1.1 小程序相关信息准备
在用户访问小程序时，微信客户端需要从微信后台获取小程序的配置、版本、权限等相关信息，以对小程序进行必要的版本管理、权限控制和校验等。
对启动耗时的影响
信息的获取和更新会影响小程序的启动耗时，尤其体现在用户首次访问小程序时。
为了在尽量降低影响启动耗时的情况下保证信息的实时性，这些信息会在本地缓存，并通过一定的机制定期进行更新。
1.2 小程序运行环境准备
在执行小程序代码之前，微信客户端需要准备小程序运行的基础环境。
小程序的运行环境包括小程序进程、原生部分的 UI 元素（如 导航栏、tabBar等）、渲染页面使用的 WebView 容器、运行开发者 JS 代码的 JS 引擎、小程序基础库等等。
对启动耗时的影响
运行环境的准备耗时较长，对小程序的启动耗时有明显影响。
为了尽可能的降低运行环境准备对启动耗时的影响，微信客户端会根据用户的使用场景和设备资源的使用情况，提前对运行环境进行部分地预加载。但由于受到设备资源和操作系统调度的影响，目前很难保证每次小程序启动时都有预加载的环境。
1.3 小程序代码包准备
小程序启动时需要从服务器获取代码包地址、下载小程序代码包，并对代码包进行校验。根据小程序页面所在分包和使用的插件不同，一次启动可能需要下载多个代码包或插件包。
当小程序版本发生更新时，微信客户端还需要对代码包进行增量更新。
对启动耗时的影响
下载耗时是启动耗时中的重要瓶颈，与代码包或增量包的体积正相关。微信采用 ZSTD 算法对小程序代码包进行压缩，以尽可能降低下载过程中传输的数据量。
考虑到包大小对用户体验的影响，平台限制单个代码包的大小上限为 2M。代码包上限的增加对于开发者来说，能够实现更丰富的功能，但对于用户来说，也增加了下载流量和本地空间的占用。为了保证启动速度，开发者应该尽可能的控制代码包大小。
2. 开发者代码注入（逻辑层）
小程序启动时需要从代码包内读取小程序的配置和代码，并注入到 JS 引擎中。在主包代码注入过程中，会触发小程序的 App.onLaunch 和首次 App.onShow 生命周期。在开发者代码注入完成后，框架侧会根据用户访问的页面进行一些页面数据初始化工作，触发首页的 Page.onLoad, Page.onShow 事件。
对启动耗时的影响
开发者代码的注入耗时直接影响小程序的启动耗时。在主流的 JS 引擎中，代码注入耗时包括编译和执行等环节，代码量、同步接口调用和一些复杂的计算，都会影响注入耗时。
由于首页渲染需要使用逻辑层发送的数据，如果开发者代码注入耗时过长，也会延迟首页渲染开始的时间。
在部分平台上，微信客户端会使用 V8 引擎的 Code Caching 技术对代码编译结果进行缓存，降低二次注入时的编译耗时。
3. 开发者代码注入（渲染层）
开发者的 wxss 和 wxml 会经过编译注入到渲染层，包含页面渲染需要的页面结构和样式信息。渲染层的注入耗时主要和页面结构复杂度和使用的自定义组件数量有关。
渲染层和逻辑层的开发者代码注入是并行进行的。
对启动耗时的影响
由于首页渲染需要使用渲染层的页面结构和样式信息，如果开发者代码注入耗时过长，会延迟首页渲染开始的时间。
4. 首页（初次）渲染
在开发者代码注入完成后，结合逻辑层得到的数据和渲染层得到的页面结构和样式信息，小程序框架会进行小程序首页的渲染，展示小程序首屏，并触发首页的 Page.onReady 事件。Page.onReady 事件触发标志小程序启动过程完成。
对启动耗时的影响
首页渲染耗时主要受页面结构和参与渲染的数据量影响。
二、关键概念
在讨论小程序启动耗时时，需要明确几个概念：
1. 小程序首屏渲染完成
从开发者角度看，小程序首屏渲染完成的标志是首页 Page.onReady 事件触发。
从框架的角度来说，小程序的首屏的内容是基于小程序的初始数据，以及在渲染开始前到达的 setData 数据渲染的。
首屏渲染完成不表示小程序页面一定有完整内容，开发者触发的 setData（例如通过 wx.request 异步请求数据）不一定能参与到首屏渲染中。
由于框架和启动流程的差异，小程序定义的首屏渲染完成不等同于浏览器的 load 事件。
2. 小程序启动阶段
从用户点击访问小程序到小程序首屏渲染完成（首页 Page.onReady 事件触发）。
3. 打开率/到达率
小程序首屏渲染完成 PV 与 用户点击访问小程序 PV 的比值。流失率 = 1 - 打开率
三、启动性能优化
在启动流程中，小程序代码包准备、开发者代码注入和首页渲染是与开发者相关的，开发者可以进行一定的优化工作。其他部分目前开发者暂时无法干预，框架侧负责进行持续的优化。
1. 小程序代码包优化
代码包优化的核心手段是降低代码包大小，代码包大小直接影响了下载耗时，影响用户启动小程序时的体验。
开发者可以采取以下手段优化代码包大小：
1.1 分包加载
使用 分包加载 是优化小程序启动耗时效果最明显的手段。建议开发者按照功能划分，将小程序的功能按使用频率和场景拆分成分包，实现代码包的按需加载。
分包加载具有以下优势：
- 承载更多功能：小程序单个代码包的体积上限为 2M，使用分包可以提升小程序代码包总体积上限，承载更多的功能与服务。
- 降低代码包下载耗时：使用分包后可以显著启动时需要下载的代码包大小，在不影响功能正常使用的前提下明显提升启动耗时。
- 降低开发者代码注入耗时：小程序启动时会一次性注入全部的开发者代码，使用分包后可以降低注入的代码量，从而降低注入耗时。
- 降低页面渲染耗时
此外，结合分包加载的几个扩展功能，可以进一步优化启动耗时：
分包预下载
在使用「分包加载」后，虽然能够显著提升小程序的启动速度，但是当用户在使用小程序过程中跳转到分包内页面时，需要等待分包下载完成后才能进入页面，造成页面切换的延迟，影响小程序的使用体验。分包预下载便是为了解决首次进入分包页面时的延迟问题而设计的。
独立分包
但小程序中的某些场景（如广告页、活动页、支付页等），通常功能不是很复杂且相对独立，对启动性能有很高的要求。独立分包可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。建议开发者将部分对启动性能要求很高的页面放到特殊的独立分包中。
相关阅读 >>
更多相关阅读请进入《微信小程序》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
