智能小程序的启动流程

智能小程序的启动流程

智能小程序的性能损耗主要发生在页面数据的获取及页面渲染，下图展示了用户从入口点击到首屏渲染的全流程：

基于上图描述的流程，我们接下来继续展开，如何针对该流程的各个环节，采取针对性的优化手段：

1. 用户点击打开小程序

此处是小程序加载的起点。

2. 下载小程序包

小程序在用户第一次打开时会下载最新版本的小程序包。如果包体积过大，会导致下载时间增长。那么可以考虑使用分包能力，并减少不必要的动态库和插件的使用。

我们将会在使用分包和合理使用动态库章节介绍该流程的优化方式。

3. 启动智能小程序框架

此时逻辑层和渲染层开始同步初始化：

3.1 初始化智能小程序框架逻辑层

加载动态库和插件：动态库和插件提供了扩展小程序能力的机制。因为其加载方式是串行的，所以如果引用了不合适的动态库和插件，会导致一定程度性能退化。开发者需要平衡功能和性能的关系，合理使用动态库章节将会详细介绍该流程的优化方式。
加载逻辑代码：逻辑代码指的是App、页面、自定义组件和使用的其他模块的js模块的集合。如果逻辑代码体积过大会影响逻辑层的启动速度。因此开发者需要考虑按需加载模块，减少代码体积。
执行onLaunch：加载完必要的资源后，智能小程序框架会执行App.onLaunch相关回调。如果App.onLaunch中执行过多同步阻塞式的逻辑，会导致后续流程阻塞，影响逻辑层启动速度。合理使用 App.onLaunch章节将会详细介绍该流程的优化方式。

完成加载动态库和插件、加载逻辑代码和执行onLaunch后，智能小程序框架逻辑层会收集initData（渲染层进行页面绘制的必要信息，包含了小程序App、页面和自定义组件的初始数据）。initData收集的早晚是衡量逻辑层性能的关键点。

3.2 初始化智能小程序框架渲染层

加载模板和样式文件：包含app.css、page.css和page.swan等相关文件。这些文件一般较小，对整体性能影响不大。
加载SJS：SJS是智能小程序的一套自定义脚本语言。SJS会产生额外的加载逻辑，对性能影响较大，建议仅在必要情况下使用此能力，提升启动性能。
加载当前页面所有使用到的自定义组件：此处使用到的自定义组件包括插件和动库中使用的组件，如果页面使用到的自定义组件较少，那么可以虑直接将逻辑写入页面模板中，并且酌情使用插件和动态库，我们在合理使用自定义组件章节介绍了该流程的优化。

完成模板和样式文件、SJS和当前页面所有使用到的自定义组件加载后，智能小程序框架渲染层初始化完成。如果逻辑层初始化相对渲染层较慢，那么就是渲染层等待initData到达；反之则是initData到达后，等待渲染层初始化完成。

智能小程序框架完成初始化后，会触发首次内容绘制。

4. 执行页面级的生命周期

首次内容绘制完成后，渲染层向逻辑层发送firstRendered事件，逻辑层开始执行生命周期。以生命周期中页面onLoad为例，假设开发者在onLoad中请求页面主数据（小程序希望首屏展示给用户的数据）。为了加速主数据的请求速度，可以使用onInit生命周期，提前请求主数据。在onInit请求首屏主数据章节将介绍如何优化小程序主数据请求。

完成以上所有流程后，会触发首次有意义的渲染。