智能小程序的启动流程

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

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

# 1. 用户点击打开小程序

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

# 2. 下载小程序包

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

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

# 3. 启动智能小程序框架

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

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

  1. 加载动态库和插件:动态库和插件提供了扩展小程序能力的机制。因为其加载方式是串行的,所以如果引用了不合适的动态库和插件,会导致一定程度性能退化。开发者需要平衡功能和性能的关系,合理使用动态库章节将会详细介绍该流程的优化方式。

  2. 加载逻辑代码:逻辑代码指的是App、页面、自定义组件和使用的其他模块的js模块的集合。如果逻辑代码体积过大会影响逻辑层的启动速度。因此开发者需要考虑按需加载模块,减少代码体积。

  3. 执行onLaunch:加载完必要的资源后,智能小程序框架会执行App.onLaunch相关回调。如果App.onLaunch中执行过多同步阻塞式的逻辑,会导致后续流程阻塞,影响逻辑层启动速度。合理使用 App.onLaunch章节将会详细介绍该流程的优化方式。

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

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

  1. 加载模板和样式文件:包含app.csspage.csspage.swan等相关文件。这些文件一般较小,对整体性能影响不大。

  2. 加载SJSSJS是智能小程序的一套自定义脚本言。SJS会产生额外的加载逻辑,对性能影响较大,建议仅在必要情况下使用此能力,提升启动性能。

  3. 加载当前页面所有使用到的自定义组件:此处使用到的自定义组件包括插件和动库中使用的组件,如果页面使用到的自定义组件较少,那么可以虑直接将逻辑写入页面模板中,并且酌情使用插件和动态库,我们在合理使用自定义组件章节介绍了该流程的优化。

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

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

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

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

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