开发
API

小程序的启动性能优化

结合小程序的启动流程,我们可以考虑从以下几个方面进行优化:

减小包体积

用户首次打开小程序时会下载最新版本的小程序包,代码包体积直接影响下载耗时,进而影响用户启动小程序时的体验。为了保证启动速度,开发者应该尽可能地控制代码包大小。

优化手段

  1. 使用分包加载
    使用分包加载是优化小程序启动耗时效果最明显的手段。建议开发者按照功能划分,将小程序的功能按使用频率和场景拆分成分包,实现代码包的按需加载。

    分包加载具有以下优势:

    • 承载更多功能:小程序单个代码包的体积上限为 2M,使用分包可以提升小程序代码包总体积上限,承载更多的功能与服务。
    • 降低代码包下载耗时:使用分包后可以显著启动时需要下载的代码包大小,在不影响功能正常使用的前提下明显提升启动耗时。
    • 降低开发者代码注入耗时:小程序启动时会一次性注入全部的开发者代码,使用分包后可以降低注入的代码量,从而降低注入耗时。
    • 降低页面渲染耗时

    此外,结合分包加载的几个扩展功能,可以进一步优化启动耗时:
    分包预下载
    在使用「分包加载」后,虽然能够显著提升小程序的启动速度,但是当用户在使用小程序过程中跳转到分包内页面时,需要等待分包下载完成后才能进入页面,造成页面切换的延迟,影响小程序的使用体验。分包预下载便是为了解决首次进入分包页面时的延迟问题而设计的。
    独立分包
    但小程序中的某些场景(如广告页、活动页、支付页等),通常功能不是很复杂且相对独立,对启动性能有很高的要求。独立分包可以独立于主包和其他分包运行。从独立分包中页面进入小程序时,不需要下载主包。建议开发者将部分对启动性能要求很高的页面放到特殊的独立分包中。

  2. 及时清理没有使用到的代码,防止代码冗余
    通过使用如 Webpack/Rollup 等打包工具,尽量利用 tree-shaking 等特性去除冗余代码,同时也要注意打包时不要引入不需要的库和依赖。
  3. 及时清理无用的资源,防止资源冗余
    目前小程序打包是会将工程下所有文件都打入代码包内,在开发迭代过程中,如果不及时清理无用的资源,会使得包体积越来越大,开发过程中要养成良好的习惯 -- 及时清理没有使用到的资源,防止资源冗余。
  4. 控制代码包内图片、音频等静态资源,将部分资源放到 CDN 上
    避免在代码包中包含或在 ttss 中内联过多、过大的代码包内的图片,应尽量采用网络图片。代码包内的图片一般应只包含一些体积较小的图标。声音、视频等其他类型的资源应尽量避免放到代码包中。
    小程序代码包在下载时会使用 Gzip 算法进行压缩,降低下载时传输的数据量。这些资源文件会占用大量代码包体积,并且通常难以进一步被压缩,对于下载耗时的影响比代码文件要大很多。

更早地发送 initData 至渲染线程

逻辑线层 initData 发送给视图线层后,视图线层才能开始进行渲染页面的工作。如果 initData 发送过晚,会导致渲染页面流程滞后。为了保证启动速度,开发者应该尽可能减小加载小程序代码包到发送 initData 过程的耗时。

优化手段

  1. 减少启动过程中的同步调用
    在小程序启动流程中,会注入开发者代码并顺序同步执行 App.onLaunch, App.onShow, Page.onLoad, Page.onShow。在小程序初始化代码(Page,App 定义之外的内容)和启动相关的几个生命周期中,应避免过度使用 Sync 结尾的同步 API,如 tt.getStorageSynctt.getSystemInfoSync 等。
  2. 减少启动过程中无用代码的加载
    对于启动过程中使用不到的 js, 可以先不加载,在真正需要使用时再去加载。
  3. 避免启动过程中复杂的计算逻辑
    在小程序启动流程中,会注入开发者代码并顺序同步执行 App.onLaunch, App.onShow, Page.onLoad, Page.onShow。在小程序初始化代码(Page,App 定义之外的内容)和启动相关的几个生命周期中,应避免执行复杂的计算逻辑。
  4. 充分利用缓存
    对调用频次高的方法的结果进行缓存,例如对于 tt.getSystemInfo, tt.getSystemInfoSync 的结果应进行缓存,避免重复调用。

更早地发送主页面数据至渲染线层

主页面数据通常来自服务端,逻辑层拿到主页面数据 setData 后,视图层收到主页面数据后进行页面更新,得到 FMP。为了保证 FMP 的速度, 开发者应该尽可能早地拿到页面数据并 setData.

优化手段

  1. 数据预取
    大部分小程序在渲染首页时,需要依赖服务端的接口数据,小程序为开发者提供了数据预取,方便开发者在小程序冷启动时提前发起请求,并缓存请求内容。
  2. 缓存请求数据
    小程序提供了 tt.getStoragett.setStorage 等读写本地缓存的能力,数据存储在本地,返回的会比网络请求快。如果开发者基于某些原因无法采用数据预拉取,我们推荐优先从缓存中获取数据来渲染视图,等待网络请求返回后进行更新。

降低渲染时长

渲染线程收到主页面数据后会进行页面更新,得到 FMP, FMP 的大小和页面的结构有很大的关系。为了保证 FMP 的速度,开发者应该尽可能地降低渲染时长。

优化手段

  1. 延迟渲染首屏可视区域之外的区域
    开发者可以将首屏可视区域外的页面进行懒加载,滑动到可视区域后再加载。

渲染层图片优化

小程序开发的过程中,经常需要引入图片资源。如果使用图片不当(过多过大的图片),在加载时会消耗更多的系统资源,从而影响整个页面的性能。

优化手段

  1. 开启图片缓存
    开启 HTTP 缓存控制后,下一次加载同样的图片,会直接从缓存读取,大大提升图片加载速度。
  2. 对于不需要透明格式的图片,推荐采用 jpeg 格式来代替 png 格式
    通过以上几个方面的优化方向,我们可以在一定程度上提升小程序启动性能。
点击纠错
评价此篇文档