开发
API

小程序启动性能优化

小程序启动是小程序用户体验中极为重要的一环,启动耗时过长直接影响用户体验,从而造成小程序用户流失。

小程序的启动过程从「用户打开小程序」到小程序「首页渲染完成」。「用户打开小程序」有多种方式,可以通过扫码、小程序跳小程序或从 APP 打开小程序等入口触发。小程序「首页渲染完成」的标志是首个页面 Page.onReady 事件触发。由于启动流程的差异,小程序定义的「首页渲染完成」不等同于浏览器的 DOMContentLoadedload 事件。

结合小程序运行流程接下来我们针对启动中的关键环节给出针对性的建议。

减小包体积

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

合理使用分包加载

使用分包加载是优化小程序启动耗时效果最明显的手段。建议开发者按照功能划分,将小程序的功能按使用频率和场景拆分成分包,实现代码包的按需加载。同时需要注意控制分包数量,避免过多拆包。

分包加载具有以下优势:

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

此外,结合分包加载的几个扩展功能,可以进一步优化启动耗时:

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

移除无用文件

目前小程序打包是会将工程下所有文件都打入代码包内,在开发迭代过程中,需要及时清理没有使用到的资源,防止资源冗余。开发中建议使用如 Webpack/Rollup 等打包工具,尽量利用 tree-shaking 等特性去除冗余代码,同时也要注意打包时不要引入不需要的库和依赖。

合理控制静态资源

避免在代码包中包含或在 TTSS 中内联过多、过大的代码包内的图片,应尽量采用网络图片。代码包内的图片一般应只包含一些体积较小的图标。声音、视频等其他类型的资源应尽量避免放到代码包中。小程序代码包在下载时会使用 Gzip 算法进行压缩,降低下载时传输的数据量。这些资源文件会占用大量代码包体积,并且通常难以进一步被压缩,对于下载耗时的影响比代码文件要大很多。

减少同步逻辑

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

  • 避免启动时运行过多同步代码。启动流程中,会注入开发者代码并顺序同步执行 App.onLaunch, Page.onLoad, 因此在这些前置的生命周期中应该减少使用同步 API 及过多的同步逻辑
  • 与渲染数据无关逻辑优先使用异步 API
  • 减少启动过程中无用代码的加载。对于启动过程中使用不到的 JS, 可以先不加载,在真正需要使用时再去加载
  • 充分利用缓存。对调用频次高的方法的结果进行缓存,例如对于 tt.getSystemInfo, tt.getSystemInfoSync 的结果应进行缓存,避免重复调用

更早的展示首屏数据

  • 尽早调用关键 API 和请求。主页面数据通常来自服务端,逻辑层拿到主页面数据 setData 后,视图层收到主页面数据后进行页面更新,得到 LCP。为了保证 LCP 的速度, 开发者应该尽可能早地请求,拿到页面数据并 setData
  • 接入数据预取。数据预取能够显著的减少网络请求时间,以西瓜视频小程序为例,线上 FMP 从 1173ms 优化到 818ms,整体优化 300+ms,速度提升了 30%,优化效果很明显
  • 避免非必要的 reLaunch,尽可能保证页面的及时展示
  • 缓存请求数据。小程序提供了 tt.getStoragett.setStorage 等读写本地缓存的能力,数据存储在本地,返回的会比网络请求快。如果开发者基于某些原因无法采用数据预拉取,我们推荐优先从缓存中获取数据来渲染视图,等待网络请求返回后进行更新

图片优化

图片加载过慢可能导致页面部分白屏,推荐以下手段进行优化

  • 使用 CND 并开启图片缓存。开启 HTTP 缓存控制后,下一次加载同样的图片,会直接从缓存读取,大大提升图片加载速度
  • 进行合理的压缩。图片过大会延迟页面的完全渲染
  • 选择合适的图片格式。对于不需要透明格式的图片,推荐采用 jpeg 格式来代替 png 格式

按需渲染

渲染线程收到主页面数据后会进行页面更新,首屏渲染完成的时机和页面的结构有很大的关系。为了保证启动的速度,开发者应该尽可能地降低渲染时长。具体有以下优化手段

  • 延迟渲染首屏可视区域之外的区域。开发者可以将首屏可视区域外的页面进行懒加载,滑动到可视区域后再加载
  • 使用框架骨架屏,减少等待焦虑。通过小程序框架提供骨架屏机制,能比业务中创建的骨架屏加载时机更靠前,使用这一机制,可以减少用户的白屏等待时长,给用户带来更好的体验
  • 使用占位组件。在页面中渲染完成前通过占位组件替代组件进行渲染,在该组件注入后再将占位组件替换,从而降低复杂组件对页面加载的影响

通过以上几个方面的优化方向,我们可以在一定程度上提升小程序启动性能。运行时优化可参考文档小程序运行时性能优化。开发过程中也可以使用体验评分工具来检测更多的小程序性能问题。

点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助