性能面板

从微信 6.5.8 开始,我们提供了性能面板,让开发者了解微信小程序的性能。开发者可以在开发版微信小程序下打开性能面板,打开方法:进入开发版微信小程序,进入右上角更多按钮,点击「显示性能窗口」。

image

性能面板指标说明

指标 说明
CPU 微信小程序进程的 CPU 占用率,仅 Android 下提供
内存 微信小程序进程的内存占用(Total Pss),仅 Android 下提供
启动耗时 微信小程序启动总耗时
下载耗时 微信小程序包下载耗时,首次打开或资源包需更新时会进行下载
页面切换耗时 微信小程序页面切换的耗时
帧率/FPS
首次渲染耗时 页面首次渲染的耗时
再次渲染耗时 页面再次渲染的耗时(通常由开发者的 setData 操作触发)
数据缓存 微信小程序通过 Storage 接口储存的缓存大小

FPS 面板

基础库 2.22.1 开始支持,低版本不生效。

为了便于开发者调试渲染层的交互性能,微信小程序基础库提供了选项开启 FPS 面板,开发者可以实时查看渲染层帧率。

启用方式

在 app.json 中,如下配置,则可在微信小程序启用 FPS 面板,展示当前的实时帧率、及当前时间窗口内的帧率波动范围。

{
  "debugOptions": {
    "enableFPSPanel": true
  }
}

请注意不要把这个配置项带到正式版本。

使用说明

  • FPS 面板是通过 webview 的 requestAnimationFrame 回调,使用 canvas 绘制的,本身可能会有一些额外的性能开销,但一般情况下可以忽略;
  • FPS 面板可以拖动到屏幕的任意位置;
  • 未启用同层渲染时,FPS 面板可能会被原生组件遮挡。

微信小程序开发者工具「模拟器」和「调试器」

微信开发者工具的「模拟器」和「调试器」,可以帮助开发者利用工具模拟微信小程序的表现,也包括了性能分析的能力。

需要开发者工具 1.05.2201240 及以上版本支持

逻辑层 JavaScript Profile

开发者可以使用「模拟器」中的「Performance」或「JavaScript Profiler」面板,分析微信小程序逻辑层的 JS 执行情况。

如果要分析启动过程中微信小程序代码注入的情况,可以点击「Performance」左上角第二个 reload 按钮。

详细的使用说明可参考 Chrome 的「Performance」、「JavaScript Profiler」面板

逻辑层内存调试

与真机调试 2.0 类似,开发者可以使用「模拟器」中的「memory」面板,获取微信小程序逻辑层的 JS 堆内存快照,分析内存分布情况,排查内存泄漏问题。

详细的使用说明可参考 Chrome 的「Memory」面板

视图层调试

需要最新工具 nightly 版本支持

开发者可以在模拟器底部打开当前页面的「视图层」调试工具。在工具中,可以通过「Performance」、「memory」、「Layer」、「Rendering」等面板调试微信小程序视图层的性能。

详细的使用说明可参考 Chrome 的对应面板

低端机模拟

开发者可以在模拟器中开启「低端机模拟」,开发者工具会对 CPU 使用等进行一定限制,模拟低端机的使用体验。

真机调试 2.0

微信开发者工具的「真机调试 2.0」功能,可以帮助开发者利用工具调试真机上的微信小程序表现,也包括了性能分析的能力。开启真机调试 2.0 的步骤请参考《真机调试 2.0 文档》。

内存调试

仅支持安卓设备

开发者可以使用「memory」面板,获取微信小程序逻辑层的 JS 堆内存快照,分析内存分布情况,排查内存泄漏问题。

详细的使用说明可参考 Chrome 的「Memory」面板

JavaScript Profiler

仅支持安卓设备

开发者可以使用「JavaScript Profiler」面板,分析微信小程序逻辑层的 JS 执行情况。如果要分析启动过程中微信小程序代码注入的情况,可以在代码中使用 debugger 来断点。

// app.js
debugger

App({
  onLaunch() {}
})

详细的使用说明可参考 Chrome 的「JavaScript Profiler」面板

性能与体验调试工具

为了协助开发者调试与优化微信小程序的性能与体验,我们提供了一些工具:

  • 真机调试 2.0:通过开发者工具调试真机运行环境。
  • 开发者工具「模拟器」和「调试器」:在开发者工具「模拟器」中对微信小程序视图层分析和进行低端机模拟,在「调试器」环境中进行 JS 性能、内存占用分析。
  • 代码质量分析面板:静态分析开发者代码,给出优化建议。
  • FPS 面板:展示页面当前的实时帧率
  • 性能面板
  • 体验评分:自动化检测微信小程序性能与体验问题,并为开发者提供优化建议。