合理使用 App.onLaunch

App.onLaunch是进入小程序的第一个生命周期函数，很多开发者会在App.onLaunch中执行一些初始化操作。如果使用不当，会显著影响首屏显示速度。

使用建议

  1. 避免在 App.onLaunch 中执行耗时很长的任务。有可能的话，将任务推移到页面显示完成后执行。
  2. 减少、避免在 App.onLaunch 中调用一些同步 API。使用异步 API 代替同步，并尽量减少、延后首页面显示非必需的 API 调用。
  3. 将 App.onLaunch 中的页面请求放在 Page.onInit 生命周期中：一些开发者为了提前首页面网络请求，会将数据请求代码放到 App.onLaunch 中执行；高版本的基础库提供了 Page.onInit，如果 App.onLaunch 耗时较短，则可以认为将页面网络请求放在自身的 Page.onInit 中，效果与 App.onLaunch 近似。

示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  1. App({
  2.     onLaunch: function () {
  3.         const key = 'app-launch-id';
  4.         // 模拟长任务
  5.         let count = 3000;
  6.         while (count--) {
  7.             const value = swan.getStorageSync(key);
  8.             swan.getStorageSync(key, value ? +value : 1);
  9.         }
  10.     }
  11. });

从下图可以明显地看出，App.onLaunch 的耗时越长，首页面白屏的时间越长。

  1. 长耗时的 App.onLaunch（count = 3000）

合理使用 App.onLaunch - 图1

  1. 短耗时的 App.onLaunch（count = 300）

合理使用 App.onLaunch - 图2