性能与体验

为什么要进行性能优化

微信小程序的性能和用户的体验之间的关系密不可分。在使用微信小程序的过程中,用户有时会遇到微信小程序打开慢、滑动卡顿、响应慢等问题,这些问题都与微信小程序的性能有关。性能问题归根到底就是用户体验的问题,如果不能得到很好的解决,会影响用户的正常使用,甚至退出微信小程序。

随着微信小程序的迭代,页面越来越多,功能越来越复杂,微信小程序的性能问题也越来越突出。在开发微信小程序的过程中,开发者不仅应该关注功能的实现,还应该将足够的精力投入到微信小程序性能的优化上,保障良好的用户体验。

如何进行性能优化

广义上讲,微信小程序的性能又可以分为「启动性能」和「运行时性能」两个主题。「启动性能」让用户能够更快的打开并看到微信小程序的内容,「运行时性能」保障用户能够流畅的使用微信小程序的功能。除了本身的功能之外,良好性能带来的良好用户体验,也是微信小程序能够留住用户的关键。

微信小程序的框架结合了 Web 开发和客户端开发的技术,并进行了进一步的创新。因此,一些 Web 开发中性能优化的方法同样适用于微信小程序,比如缓存的使用、网络请求的优化、代码压缩等等。此外,由于微信小程序技术框架的特点,微信小程序开发中也有一些特殊的性能优化方法。

在进行性能优化时,开发者可以参考本章节中的优化指引,并借助微信小程序提供的一些调试工具和性能数据。

启动性能

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

本章节的「启动」特指微信小程序冷启动,不包括微信小程序后台切前台的热启动。关于冷/热启动的定义,请参考微信小程序运行机制

1. 微信小程序启动的定义

微信小程序的启动过程以「用户打开微信小程序」为起点,到微信小程序「首页渲染完成」为止

「用户打开微信小程序」可能是由用户点击访问触发,也可能通过扫码、微信小程序跳微信小程序或 APP 打开微信小程序等入口触发。从扫码、APP 等场景打开微信小程序时,可能会有前置的跳转和校验流程,不包含在微信小程序启动流程的讨论范围之内。

微信小程序「首页渲染完成」的标志是首个页面 Page.onReady 事件触发。由于启动流程的差异,微信小程序定义的「首页渲染完成」不等同于浏览器的 DOMContentLoadedload 事件。

要了解微信小程序启动的具体流程,请参考《微信小程序启动流程》章节的介绍。

2. 打开率/到达率

微信小程序「首页渲染完成」次数与「微信小程序启动」次数的比值也被称为(PV)打开率或(PV)到达率。与之对应的 流失率 = 1 - 打开率

打开率受到下列因素影响:

  • 启动性能:启动耗时越长,白屏时间越久,用户越可能因为失去耐心而退出微信小程序,打开率也会越低;
  • 用户等待意愿:用户等待意愿越强,等待时间也会更久,在启动耗时一致的情况下,打开率也会越高。用户等待意愿与使用微信小程序的场景有关,例如:
    • 扫码、搜索等用户目的性较强的场景,通常等待意愿也更强;
    • 广告类的场景下,用户等待意愿较低,要获得较高的打开率,启动性能优化会更加有必要。