分类： 微信小程序开发

查看详细介绍
产品体验分析是一款帮助微信小程序提升拉新、留存、付费转化率的数据分析工具。它能够可视化还原用户操作现场，精准定位产品交互体验缺陷或功能bug。

功能介绍

会话回放

对于用户每一次与应用交互的全部过程，都会真实记录并进行回放。你可以查看用户在此次会话中的具体操作行为。

热力图

直观展示大多数用户是如何使用你的产品。你可以查看用户在产品使用中鼠标点击、页面停留的位置。分析页面元素的曝光度，优化页面信息展示。

转化分析

探索不同页面与事件的流量流转，绘制用户体验地图，发现并优化用户流失问题，提升用户转化率与留存率。

开始体验

前往查看操作说明

诊断工具从启动性能、跳页性能、最佳实践、操作体验和网络性能五个方面进行评测。

部分启动性能指标含义与跳页性能指标相同，性能报告中区分首页和其它页面，可以更方便地排查启动流程中的问题。

名词解释

• 长任务: 执行耗时超过 50ms 的函数。
• 按需注入：仅注入当前访问页面所需的自定义组件和页面代码。
• 用时注入：开启「按需注入」特性的前提下，「用时注入」可以指定一部分自定义组件不在微信小程序启动时注入，而是在真正渲染的时候才进行注入。

指标清单

简介

为了协助开发者更好地排查微信小程序的性能和体验问题，我们推出了<a href="https://weixin-xiaochengxu-kaifa.yuannext.com">微信小程序</a>性能诊断工具。

诊断工具会从启动性能、跳页性能、最佳实践、操作体验和网络性能等方面对微信小程序进行检测，并给出针对性的优化建议，部分指标会尝试给出预估的优化空间。

使用方法

运行环境要求：

• 基础库使用 3.7.0 及以上版本
• iOS 客户端版本 >= 8.0.54
• Android 客户端版本 >= 8.0.55
• 开发者工具 Nightly >= 1.06.2411272

开发版/体验版 微信小程序可从微信小程序菜单开启诊断工具，正式版本不支持使用。

1. 右上角菜单-开发调试-开启 Audits-重启并自动开启检测

会自动关闭当前微信小程序，下次打开时自动检测，页面中出现“检测中”标识。进入到需要检测的页面，操作微信小程序。

2. 右上角菜单-开发调试-关闭 Audits

有任务结束弹窗弹出，点击导出数据有 json 文件分享到微信里。

3. 将导出的 json 文件拖拽到开发者工具 Audits 面板进行可视化

注意事项

1. 诊断工具仅在激活后会加载相关代码，并对 开发版/体验版 进行检测，正式版本即使激活也不会生效。
2. 诊断工具是在运行时检测，覆盖范围依赖开发的操作路径，开发者应可能操作关键路径，触发页面滚动、轮播之类的操作。
3. 诊断工具是体验评分的升级，少量指标会重叠，诊断工具致力于给出具体的可优化建议。

为了帮助开发者更好地了解和分析微信小程序性能状况，我们在「微信小程序助手」微信小程序上提供了性能相关的数据统计。同时，开发者也可以根据业务需要自行上报和分析。

1. 获取性能数据

1.1 通过 We 分析

We 分析-「性能质量」-「性能数据」也提供部分性能数据的看板，目前还在不断完善中。

1.2 通过 wx.getPerformance 在微信小程序内获取

开发者可以使用 wx.getPerformance 获取当前微信小程序性能相关的信息，包括无法在 JS 代码中直接打点获取的一些时间信息。此外，开发者也可以在微信小程序中根据自身业务需要进行打点。

具体的指标说明如下：

• appLaunch：微信小程序启动耗时。
  • 起点为用户点击微信小程序图标，或微信小程序被拉起的时间；
  • 终点为首个页面 LargestContentfulPaint 结束时间。
• route：页面切换耗时。
  • 起点为触发页面切换；
  • 终点为页面 LargestContentfulPaint 结束时间；
  • 详情请参见页面切换性能文档。
• firstRender：页面首次渲染耗时。
  • 起点为逻辑层收到路由事件，包括逻辑层页面与组件初始化、VD 同步、渲染层执行渲染的时间；
  • 终点为页面 onReady；
  • 详情请参见页面切换性能文档。
• firstPaint(FP)：页面首次绘制
  • 页面首次绘制（第一个像素渲染到屏幕上）的时间；
• firstContentfulPaint(FCP)：
  • 页面首次内容绘制（第一块内容渲染到屏幕上）的时间；
  • 具体含义可以参考 《First Contentful Paint》
• largestContentfulPaint(LCP)：
  • 页面最大内容绘制的时间；
  • 具体含义可以参考 《Largest Contentful Paint》
• evaluateScript：逻辑层 JS 代码注入（含编译和执行）耗时。

1. 合理使用分包加载

使用分包加载不仅能优化启动耗时，也能够实现页面、组件和逻辑较粗粒度的按需加载，从而降低内存的占用。详情请参考《启动优化-代码包体积优化》

2. 使用按需注入和用时注入

通过开启「按需注入」和「用时注入」，可以在运行时避免加载未使用到的页面和组件，降低运行时的内存占用。详情请参考《启动优化-代码注入优化》

3. 内存分析

如果要更精细地分析微信小程序逻辑层的内存分布情况，可以使用开发者工具调试器的「内存调试」或「真机调试 2.0」提供的「内存调试」能力。

4. 处理内存告警

当微信小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。在 iOS 上，当微信客户端在一定时间间隔内连续收到系统内存告警时，会根据一定的策略，主动销毁微信小程序，并提示用户「运行内存不足，请重新打开该微信小程序」。

建议微信小程序在必要时使用 wx.onMemoryWarning 监听内存告警事件，进行必要的内存清理。例如：释放一些暂时不用的组件或 JS 对象。

5. 微信小程序常见的内存泄露问题

存在内存泄露问题会导致微信小程序在运行过程中内存占用持续增长，引起微信小程序闪退或被微信强制销毁。

5.1 微信小程序长期持有页面实例，导致页面实例和引用的组件无法正常销毁

页面 unload 之后，基础库会从页面栈中将页面实例清理。正常情况下，JS 垃圾回收机制会将页面进行回收，释放内存。

但如果开发者代码中持有的页面实例（this）未释放，则会导致页面未被正常回收，引起内存泄露。建议开发者注意，并在 unload 中进行必要的清理。

案例一：页面实例被未解绑的事件监听引用

事件监听器中持有了页面的 this，如果页面销毁后监听未解绑，会导致页面无法释放。

Page({
  themeChangeHandler({ theme }) {
    this.setData({ theme })
  },
  onLoad() {
    this._handler = this.themeChangeHandler.bind(this)
    wx.onThemeChange(this._handler)
  },
  // 修复方法：unload 中解绑监听
  // onUnload() {
  //   wx.offThemeChange(this._handler)
  // },
})

案例二：页面实例被页面外变量或全局变量引用

函数闭包内持有了页面的 this，且函数被挂到全局或页面生命周期外的变量，会导致页面无法释放。

let languageListener = null

Page({
  onLoad() {
    getApp().userInfoChangeListener = ({ userName }) => {
      this.setData({ userName })
    }
    languageListener = ({ lang }) => {
      this.setData({ lang })
    }
  },
  // 修复方法：unload 中进行清理
  // onUnload() {
  //   getApp().userInfoChangeListener = null
  //   languageListener = null
  // },
})

案例三：页面实例被异步回调长时间引用

如果在长时间未返回的异步回调中访问了页面的 this，如持续时间过长的 setTimeout、setInterval，耗时较长的 wx API 回调（如长时间的 wx.request 等），会导致页面无法释放。

Page({
  onLoad() {
    this._timer = setInterval(() => {
      this.setData({
        timerValue: Date.now()
      })
    }, 1000)
  },
  // 修复方法：unload 中进行清理
  // onUnload() {
  //   clearInterval(this._timer)
  // },
})

5.2 事件监听未及时解绑

事件监听结束后，应及时解绑监听器

const locationChangeListener = function (res) {
  console.log('location change', res)
}
wx.onLocationChange(locationChangeListener)
wx.startLocationUpdate()

// 监听结束后
wx.stopLocationUpdate()
// 修复方法：不使用后及时解绑监听
// wx.offLocationChange(locationChangeListener)

5.3 未清理的定时器

开发者在开发如「秒杀倒计时」等功能时，可能会使用 setInterval 设置定时器，页面或组件销毁前，需要调用 clearInterval 方法取消定时器。

1. 控制图片资源的大小

开发者应根据功能需要和实际显示区域的大小，选择合适的图片尺寸、图片格式和压缩比。

图片体积太大，可能导致下列后果

• 增加图片下载时间，导致用户看到图片时机延迟；
• 对用户造成非必要的流量消耗；
• 影响图片解码和绘制的耗时，可能更容易造成掉帧、卡顿或白屏，甚至无法正常进行滚动和页面切换（低端设备上会尤为明显）；
• 内存占用增长，尤其是大图片和长列表中的大量图片会导致内存占用急剧上升。

图片对内存的影响

iOS 系统内存紧张时，会主动回收掉一部分 WebView。大图片和长列表中的大量图片很容易引起系统对 WebView 的回收，导致微信小程序白屏，严重时会触发微信强制关闭微信小程序。

内存增长如果超过了限制，也会导致微信小程序出现白屏或黑屏，甚至整个微信小程序发生闪退。

2. 避免滥用 image 组件的 widthFix/heightFix 模式

widthFix/heightFix 模式会在图片加载完成后，动态改变图片的高度或宽度。图片高度或宽度的动态改变，可能会引起页面内大范围的布局重排，导致页面发生抖动，并造成卡顿。

对于页面的背景图或 banner 图，应尽量预先指定图片的尺寸，避免图片加载完成后再进行二次的尺寸调整。

页面切换的性能影响用户操作的连贯性和流畅度，是微信小程序运行时性能的一个重要组成部分。

1. 页面切换的流程

要想优化页面切换的性能，有必要先简单了解下微信小程序页面切换的过程。页面切换流程如图所示：

开发者可以通过wx.getPerformance接口中 entryType 为 navigation，name 为 route 的指标（PerformanceEntry），获取页面切换耗时时。

当切换的目标页面已加载完成时（例如：路由类型为 navigateBack，或 switchTab 到一个已加载的页面），不需要进行「视图层页面初始化」和「目标页面渲染」，「逻辑层页面初始化」也会较为简化，如下图所示：

1.1 触发页面切换

页面切换的流程，从用户触发页面切换开始。

触发时间对应 PerformanceEntry(route) 中的 startTime。

页面切换可能由以下几类操作触发：

• 微信小程序API调用：开发者根据用户操作，调用 wx.navigateTo、wx.navigateBack、wx.redirectTo、wx.reLaunch、wx.switchTab 等 API。
• 用户点击 <navigator> 组件进行页面切换。
• 用户点击原生 UI 触发：例如点击 tabBar（自定义 tabBar 除外）、点击左上角「返回首页」按钮、点击系统返回键或左滑返回等。
• 微信小程序热启动时自动 reLaunch：微信小程序热启动的 B 类场景

目前后两种情况暂时未能获取准确的触发时间，PerformanceEntry(route) 的 startTime 和 navigationStart 一致。

1.2 加载分包（若有）

如果页面切换的目标页面在分包中，页面切换时需要下载分包，并在逻辑层注入执行分包内的 JS 代码。

微信小程序生命周期内，每个分包只会在逻辑层注入一次。

1.3 视图层页面初始化

微信小程序视图层的每个页面都是由独立的 WebView 渲染的，因此页面切换时需要一个新的 WebView 环境。视图层页面初始化主要会做以下事情：

• 创建 WebView
• 注入视图层的微信小程序基础库
• 注入主包的公共代码（独立分包除外）
• （若页面位于分包中）注入分包的公共代码
• 注入页面代码

为了降低视图层页面初始化的耗时，在页面渲染完成后，通常会进行必要的预加载供页面切换时使用。预加载主要会做以下事情：

• 创建 WebView
• 注入视图层的微信小程序基础库
• 注入主包的公共代码（若主包已在本地）

如果页面切换过快，或预加载的环境被回收，则需要在页面切换时重新创建环境。

如果页面切换时有预加载好的环境，可以大大降低页面切换的耗时。

当切换的目标页面已加载完成时，不需要进行本阶段。

1.4 逻辑层页面初始化

完成分包加载和 WebView 创建后，客户端会向基础库派发路由事件。

基础库收到事件后会进行逻辑层的页面初始化，包括触发上一个页面的 onHide/onUnload、页面组件树初始化、更新页面栈并生成初始数据发送到视图层，并依次触发目标的 onLoad, onShow 生命周期。如果启用了「按需注入」，这一阶段还会注入页面代码。

基础库收到事件的时间对应 PerformanceEntry(route) 中的 navigationStart，对应 PerformanceEntry(firstRender) 的开始时间。

当切换的目标页面已加载完成时，不需进行页面组件树初始化和初始数据的发送，且不会触发目标页面的 onLoad。

1.5 目标页面渲染

页面切换的目标页面不存在时，会触发页面的首次渲染。

在完成视图层代码注入，并收到逻辑层发送的初始数据后，结合从初始数据和视图层得到的页面结构和样式信息，微信小程序框架会进行页面渲染，并触发页面的 onReady 事件。

视图层渲染完成，触发页面 onReady 事件的时间，对应 PerformanceEntry(firstRender) 的结束时间。

当切换的目标页面已加载完成时，不需要进行本阶段。

1.6 页面切换动画

页面渲染完成后，客户端会进行页面切换的动画（如：从右向左推入页面）。如果页面初始化和渲染的时间超过固定时间，为避免用户以为页面无响应，页面会提前推入。

页面推入动画完成的时间，对应 PerformanceEntry(route) 的结束时间。

2. 如何优化页面切换

2.1 避免在 onHide/onUnload 执行耗时操作

页面切换时，会先调用前一个页面的 onHide 或 onUnload 生命周期，然后再进行新页面的创建和渲染。如果 onHide 和 onUnload 执行过久，可能导致页面切换的延迟。

• ✅ onHide/onUnload 中的逻辑应尽量简单，若必须要进行部分复杂逻辑，可以考虑用 setTimeout 延迟进行。
• ❌ 减少或避免在 onHide/onUnload 中执行耗时逻辑，如同步接口调用、setData 等。

2.2 首屏渲染优化

页面首屏渲染是页面切换耗时的重要组成部分，优化手段可以参考启动性能优化中首屏渲染优化部分。

2.3 提前发起数据请求

在一些对性能要求比较高的场景下，当使用 JSAPI 进行页面跳转时（例如 wx.navigateTo），可以提前为下一个页面做一些准备工作。页面之间可以通过 EventChannel 进行通信。

例如，在页面跳转时，可以同时发起下一个页面的数据请求，而不需要等到页面 onLoad 时再进行，从而可以让用户更早的看到页面内容。尤其是在跳转到分包页面时，从发起页面跳转到页面 onLoad 之间可能有较长的时间间隔，可以加以利用。

2.4 控制预加载下个页面的时机

基础库 2.15.0 开始支持，仅安卓。低版本配置不生效。

如 1.3 节所述，微信小程序页面加载完成后，会预加载下一个页面。默认情况下，微信小程序框架会在当前页面 onReady 触发 200ms 后触发预加载。

在安卓上，微信小程序渲染层所有页面的 WebView 共享同一个线程。很多情况下，微信小程序的初始数据只包括了页面的大致框架，并不是完整的内容。页面主体部分需要依靠 setData 进行更新。因此，预加载下一个页面可能会阻塞当前页面的渲染，造成 setData 和用户交互出现延迟，影响用户看到页面完整内容的时机。

为了让用户能够更早看到完整的页面内容，避免预加载流程对页面加载过程的影响，开发者可以配置 handleWebviewPreload 选项，来控制预加载下个页面的时机。

handleWebviewPreload 有以下取值

• static: 默认值。在当前页面 onReady 触发 200ms 后触发预加载。
• auto: 渲染线程空闲时进行预加载。由基础库根据一段时间内 requestAnimationFrame 的触发频率算法判断。
• manual: 由开发者通过调用 wx.preloadWebview 触发。开发者可以在页面主要内容的 setData 结束后手动触发。

例如：

在 app.json 中（作用于全局控制）

{
  "window": {
    "handleWebviewPreload": "auto"
  }
}

或在页面 JSON 文件中（只作用于单个页面）

{
  "handleWebviewPreload": "manual"
}

Page({
  onLoad() {
    this.setData({
      fullData: {}
    }, () => {
      // 只有配置为 manual 时需要调用
      wx.preloadWebview?.()
    })
  }
})

如下图所示，假设某微信小程序主页完整内容是分了三个 setData 进行的：

1. 适当监听页面或组件的 scroll 事件

只要用户在 Page 构造时传入了 onPageScroll 监听，基础库就会认为开发者需要监听页面 scoll 事件。此时，当用户滑动页面时，事件会以很高的频率从视图层发送到逻辑层，存在一定的通信开销。

类似的，对于 <scroll-view>、<page-meta> 等可以通过 bindscroll 监听滑动事件的组件，也会存在这一情况。

正是由于 scroll 事件触发的频率很高，因此开发者很容易误用，在使用时需要注意：

• ✅ 非必要不监听 scroll 事件；
• ✅ 在实现与滚动相关的动画时，优先考虑滚动驱动动画（仅 <scroll-view>）或 WXS 响应事件
• ❌ 不需要监听事件时，Page 构造时应不传入 onPageScroll 函数，而不是留空函数；
• ❌ 避免在 scroll 事件监听函数中执行复杂逻辑；
• ❌ 避免在 scroll 事件监听中频繁调用 setData 或同步 API。

Page({
  onPageScroll () {} // ❌不要保留空函数
})

Page({ 
  // ✅ 应直接不传入
})

2. 选择高性能的动画实现方式

开发者在开发界面动画时，应该选择高性能的动画实现方式。

• ✅ 优先使用 CSS 渐变、CSS 动画、或微信小程序框架提供的其他动画实现方式完成动画；
• ✅ 在一些复杂场景下，如果上述方式不能满足，可以使用 WXS 响应事件 动态调整节点的 style 属性做到动画效果。同时，这种方式也可以根据用户的触摸事件来动态地生成动画；
• ❌ 避免通过连续 setData 改变界面的形式来实现动画。虽然实现起来简单灵活，但是极易出现较大的延迟或卡顿，甚至导致微信小程序僵死；
• ✅ 如果不得不采用 setData 方式，应尽可能将页面的 setData 改为自定义组件中的 setData 来提升性能。

3. 使用 IntersectionObserver 监听元素曝光

部分业务场景会需要监控元素曝光情况，用于进行一些页面状态的变更或上报分析。

• ✅ 建议使用节点布局相交状态监听 IntersectionObserver 推断某些节点是否可见、有多大比例可见；
• ❌ 避免通过监听 onPageScroll 事件，并在回调中通过持续查询节点信息 SelectQuery 来判断元素是否可见。

4. 控制 WXML 节点数量和层级

一个太大的 WXML 节点树会增加内存的使用，样式重排时间也会更长，影响体验。

• ✅ 建议一个页面 WXML 节点数量应少于 1000 个，节点树深度少于 30 层，子节点数不大于 60 个。

5. 控制在 Page 构造时传入的自定义数据量

为了便于开发，开发者可以添加任意的函数或数据到 Page 构造传入的 Object 参数中，并在页面的函数内用 this 访问。例如：

Page({
  data: {}
  userInfo: {} // 自定义数据
  currentUser: 'Wechat' // 自定义数据
  onTap() { }
  onLoad() {
    console.log(this.currentUser)
  }
})

为了保证自定义数据在不同的页面实例中也是不同的实例，微信小程序框架会在页面创建时对这部分数据（函数类型字段除外）做一次深拷贝，如果自定义数据过多或过于复杂，可能带来很大的开销。

• ✅ 对于比较复杂的数据对象，建议在 Page onLoad 或 Component created 时手动赋值到 this 上，而不是通过 Page 构造时的参数传入。

// ❌ 使用复杂对象作为自定义数据
Page({
  onLoad() { }
  bigData: { /* A complex object */ },
  longList: [ /* A long complex array*/ ]
})

// ✅ 运行时手动赋值到 this。开发者可以根据需要选择进行深拷贝、浅拷贝或不拷贝。
Page({
  onLoad() {
    this.bigData = { /* A complex object */ },
    this.longList = [ /* A long complex array*/ ]
  }
})

微信小程序的运行时性能直接决定了用户在使用微信小程序功能时的体验。如果运行时性能出现问题，很容易出现页面滚动卡顿、响应延迟等问题，影响用户使用。如果内存占用过高，还会出现黑屏、闪退等问题。

在优化运行时性能前，建议开发者先了解下微信小程序的运行环境和运行机制。

开发者可以从以下方面着手进行启动性能的优化：

• 合理使用 setData
• 渲染性能优化
• 页面切换优化
• 资源加载优化
• 内存优化