小程序 启动性能优化

Question

启动流程

1. 小程序启动的各流程不是串行完成的，会尽可能的并行进行
2. 小程序启动的各流程不是每次启动都完整进行的，会尽可能的利用缓存。

1.【优化】开发者代码注入（逻辑层）

在主包代码注入过程中，会触发小程序的 App.onLaunch 和首次 App.onShow 生命周期，注入完成后，触发首页的 Page.onLoad, Page.onShow 事件,而首页的 Page.onReady 事件触发（首屏渲染完成)标志小程序启动过程完成。在小程序初始化代码（Page，App 定义之外的内容）和启动相关的几个生命周期中，应避免执行复杂的计算逻辑或过度使用 Sync 结尾的同步 API，如 wx.getStorageSync ， wx.getSystemInfoSync 等。对于 getSystemInfo , getSystemInfoSync 的结果应进行缓存，避免重复调用。

注意：首屏渲染完成不表示小程序页面一定有完整内容，开发者触发的 setData （例如通过 wx.request 异步请求数据）不一定能参与到首屏渲染中。

优化方式：

1.Code Caching

在部分平台上，微信客户端会使用 V8 引擎的 Code Caching 技术对代码编译结果进行缓存，降低二次注入时的编译耗时。

2.懒注入

懒注入 通过按需注入代码降低启动时需要注入的代码量。需要开发者手动启用。

通常情况下，在小程序启动时，启动页面所在分包和主包（独立分包除外）的所有 JS 代码会全部合并注入，包括其他未访问的页面以及未用到自定义组件，造成很多没有使用的代码注入到小程序运行环境中，影响注入耗时和内存占用。

懒注入仅注入当前页面需要的自定义组件和当前页面代码，以降低小程序的启动时间和运行时内存。开发者可以在 app.json 中配置：

{
  "lazyCodeLoading": "requiredComponents"
}

注意：添加这项配置后，未使用到的代码文件将不被执行。

2. 【优化】降低代码包体积

代码包大小直接影响了下载耗时，影响用户启动小程序时的体验

优化方式

1.分包加载

分包加载 是优化小程序启动耗时效果最明显的手段

1. 分包预下载
2. 独立分包

但小程序中的某些场景（如广告页、活动页、支付页等），通常功能不是很复杂且相对独立，对启动性能有很高的要求。独立分包可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。建议开发者将部分对启动性能要求很高的页面放到特殊的独立分包中。

独立分包和分包预下载可以配合使用，获得更好的效果，详情请参考 独立分包与分包预下载教程

2.代码重构和优化

通过代码重构，降低代码冗余。在使用如 ** Webpack **等打包工具时，要尽量利用 tree-shaking 等特性去除冗余代码，也要注意防止打包时引入不需要的库和依赖

3. 控制代码包内图片等资源

避免在代码包中包含或在 WXSS 中使用 base64 内联过多、过大的图片，应尽量采用网络图片。代码包内的图片一般应只包含一些体积较小的图标。声音、视频等其他类型的资源应尽量避免放到代码包中。

3.【优化】页面渲染

优化方式

1. 提前首屏数据请求

大部分小程序在渲染首页时，需要依赖服务端的接口数据，小程序为开发者提供了提前发起数据请求的能力：

• 数据预拉取 ：能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据，当代码包加载完时可以更快地渲染页面，减少用户等待时间，从而提升小程序的打开速度。
• 周期性更新 ：在用户未打开小程序的情况下，也能从服务器提前拉取数据，当用户打开小程序时可以更快地渲染页面，减少用户等待时间。

2. 骨架屏

3.缓存请求数据

使用 wx.setStorage 、 wx.getStorage 等读写本地缓存

4.精简首屏数据

延迟请求非关键渲染数据，与视图层渲染无关的数据尽量不要放在 data 中，加快页面渲染完成时间。

5.启用「初始渲染缓存」

初始渲染缓存 ，可以在非首次启动时，使视图层不需要等待逻辑层初始化完毕，而直接提前将页面初始 data 的渲染结果展示给用户，这可以使得页面对用户可见的时间大大提前。