微信小程序启动性能(2)-木庄网络博客

当前第2页返回上一页

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

1.2 代码重构和优化

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

1.3 控制代码包内图片等资源

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

小程序代码包在下载时会使用 ZSTD 算法进行压缩，降低下载时传输的数据量。这些资源文件会占用大量代码包体积，并且通常难以进一步被压缩，对于下载耗时的影响比代码文件大得多。

1.4 及时清理没有使用到的代码和资源

在日常开发的时候，我们可能引入了一些新的库文件，而过了一段时间后，由于各种原因又不再使用这个库了，我们常常会只是去掉了代码里的引用，而忘记删掉这类库文件了。

目前小程序打包是会将工程下所有文件都打入代码包内，也就是说，这些没有被实际使用到的库文件和资源也会被打入到代码包里，从而影响到整体代码包的大小。

2. 开发者代码注入优化

开发者代码注入的优化可以从优化执行耗时和优化代码量两部分着手。

2.1 减少启动过程的同步调用

在小程序启动流程中，会注入开发者代码并顺序同步执行 App.onLaunch, App.onShow, Page.onLoad, Page.onShow。在小程序初始化代码（Page，App 定义之外的内容）和启动相关的几个生命周期中，应避免执行复杂的计算逻辑或过度使用Sync结尾的同步API，如 wx.getStorageSync，wx.getSystemInfoSync 等。对于 getSystemInfo, getSystemInfoSync 的结果应进行缓存，避免重复调用。

2.2 使用懒注入

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

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

{
  "lazyCodeLoading": "requiredComponents"
}

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

3. 页面渲染优化

3.1 提前首屏数据请求

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

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

3.2 骨架屏

在页面数据未准备好时（如需要通过网络获取），尽量避免展示空白页面，应先通过骨架屏展示页面的大致结构，请求数据返回后在进行页面更新。以提升用户的等待意愿。

3.3 缓存请求数据

小程序提供了wx.setStorage、wx.getStorage等读写本地缓存的能力，数据存储在本地，返回的会比网络请求快。如果开发者基于某些原因无法采用数据预拉取与周期性更新，我们推荐优先从缓存中获取数据来渲染视图，等待网络请求返回后进行更新。

3.4 精简首屏数据

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

四、启动性能分析

1. 性能数据获取

1.1 小程序助手「性能分析」板块

小程序管理后台的性能数据还没有更新，正在规划改版中，建议在改版完成前开发者以小程序助手的性能数据为准。

建议开发者使用小程序助手中「性能分析」板块，持续关注小程序性能。性能分析从 启动性能、运行性能和网络性能 三个维度提供性能数据，供开发者根据平台、机型、网络环境和访问来源等条件做精细化分析。扫描下方小程序码即可立即体验。

目前，小程序助手中只包括微信客户端 >= 7.0.3 版本的正式版小程序数据。

1.2 通过 API 在小程序内获取

开发者可以在小程序中根据自身业务需有进行性能打点，也可以使用 wx.getPerformance ，获取当前小程序性能相关的信息。

在获取信息后，开发者可以自行上报或使用 wx.reportPerformance 进行测速。

1.3 体验评分

小程序工具中提供了体验评分工具，方便开发者能够及时发现小程序的体验问题。

2. 影响启动性能的因素

根据「启动流程」一节介绍的启动流程来看，影响小程序启动耗时的因素众多，分析小程序启动性能是一个比较复杂的过程。

对于同一个小程序，以下因素会直接影响平均启动耗时：

平台: 不同平台下（安卓、iOS、PC等）设备性能、操作系统、框架实现、优化方案存在较大差异，启动耗时也存在较大的差异。只有分平台比较启动耗时（包括各阶段的耗时）才有意义。
下载比例：代码包下载和更新都会显著影响小程序启动耗时，在其他流程耗时稳定的情况下，下载比例升高会影响大盘启动耗时。
入口页面：不同页面启动时，根据所在分包的不同，需要下载的代码包数量和大小和代码注入量都存在差异。不同页面渲染耗时也存在差异。
机型分布：启动耗时和设备性能有较强关联，不同小程序或使用场景用户群体的差异可能导致机型分布的差异，进而影响大盘启动耗时。
网络环境：网络环境主要影响网络请求的耗时，如小程序信息获取、代码包下载等。

此外，下列情况也会间接影响启动耗时：