---
title: FPS 性能检测
summary: "介绍如何使用 FPS 性能检测工具观察页面运行流畅度并排查卡顿问题。"
docType: default
tags: [FPS帧率检测, FPS性能监控工具, 帧率分析]
questions:
  - 什么是 FPS 性能检测，适合排查哪些问题？
  - 如何在真机上打开 FPS 性能检测工具？
  - FPS 性能检测适用于哪些场景？
  - FPS 偏低或明显下降时应该如何排查？
  - FPS 检测结果中各指标的含义是什么？
---

# FPS 性能检测

FPS（Frames Per Second，每秒帧数）性能检测用于观察页面在运行过程中的流畅度，适合排查滑动卡顿、动画掉帧、操作响应不顺畅等问题。

## 打开方式

1. 在真机上进入需要检测的页面。
2. 进入调试工具：
   - **iOS**：点击右上角的 `...` 按钮，在底部弹层中点击 **调试工具**。
   - **Android**：长按右上角的 **X** 按钮，弹出 App 基础信息面板，点击下方的 **打开调试** 按钮。
3. 在调试工具菜单中点击 **打开vConsole工具**。
4. 找到**Perf** 栏，点击 "**Open FPS monitor**" 即可开启性能监测。
5. 在页面上执行滚动、切换、动画、拖拽等操作，观察帧率变化。

<Image src="/images/debug/debug1.png" width="200px" />

## 适用场景

- 列表滑动时出现明显卡顿
- 动画播放不流畅
- 高频交互场景掉帧
- 优化前后需要对比运行时流畅度

## 重点关注指标

| 指标 | 含义 | 说明 |
| ---- | ---- | ---- |
| FPS | 每秒渲染帧数 | 数值越高，页面越流畅 |

更多指标请查看[调试指南](/cn/miniapp/develop/ray/guide/debug-guide) 

## 结果判断建议

- **FPS 长时间偏低**：通常说明页面整体渲染负担较重。
- **滚动时 FPS 明显下降**：优先检查长列表渲染、节点数量、重复渲染问题。
- **动画过程中 FPS 明显下降**：优先检查动画是否由频繁的数据更新驱动，是否可以改为更轻量的动画方案。
- **特定操作时瞬时掉帧**：通常与同步计算、批量更新或大数据处理有关。

如果已经定位到问题，可以继续参考以下文档：

- [合理使用 setData](/cn/miniapp/develop/ray/guide/optimization/runtime/setdata)
- [渲染性能优化](/cn/miniapp/develop/ray/guide/optimization/runtime/render)