2. 帧率测量：用 Chrome DevTools、System Trace、PerfDog 测帧率
帧率测量这事，说起来简单，做起来坑不少。我见过不少团队，优化做了一大堆，结果测出来的数据根本不准——白忙活。今天咱们就把三个主流工具掰开揉碎讲清楚。
2.1 为什么不能只看 FPS 数字？
很多人觉得帧率就是 FPS 越高越好。其实不然。你想想看，一个游戏跑 60 FPS，但每 0.5 秒卡顿一次，体验还不如稳定 30 FPS。真正要关注的是 帧时间——每帧渲染花了多少毫秒。
核心指标对照表
| 指标 | 含义 | 理想值 | 警告值 |
|---|---|---|---|
| FPS | 每秒帧数 | ≥60 | <30 |
| 帧时间 | 每帧渲染耗时 | ≤16.7ms (60FPS) | >33ms |
| 帧时间抖动 | 帧时间标准差 | <3ms | >8ms |
| 掉帧率 | 超过阈值的帧占比 | <1% | >5% |
我个人习惯，先看帧时间曲线，再看 FPS。曲线平滑比数字高重要得多。
2.2 Chrome DevTools：Web 端首选
做 H5 游戏或 Web 应用，Chrome DevTools 的 Performance 面板就够了。我刚开始用它时也犯过傻——直接点录制，跑完一看数据，全是浏览器自己的开销。
操作步骤
- 打开 Chrome DevTools，切到 Performance 面板
- 点击录制按钮（圆圈），开始记录
- 在页面上操作你要测试的场景（比如滑动、点击、动画）
- 停止录制，分析结果
我的习惯：录制时长控制在 5-10 秒。太短看不出规律，太长数据太多反而难分析。录制前先清空缓存，关掉不必要的扩展。
怎么看结果？
录制完成后，你会看到 FPS 图表、CPU 占用、帧时间瀑布图。重点关注：
- 红色条：表示帧时间超过 50ms，明显卡顿
- 绿色条：帧时间在 16.7ms 以内，流畅
- Main 线程：看看哪些函数占用了大量时间
我曾经遇到一个项目，动画总是掉帧。用 DevTools 一看，发现是某个定时器回调里做了 DOM 重排。改成 requestAnimationFrame 后，帧时间从 40ms 降到了 12ms。
2.3 System Trace：Android 原生应用的利器
做 Android 原生开发，System Trace（也叫 systrace）是必学的。它能抓到系统级别的信息——GPU 渲染、SurfaceFlinger 合成、VSync 信号，这些 Chrome DevTools 看不到。
怎么用？
# 抓取 10 秒的 trace
python systrace.py -t 10 -o my_trace.html
# 指定要跟踪的类别
python systrace.py -t 10 gfx input view sched -o my_trace.html抓完后用浏览器打开生成的 HTML 文件。你会看到一条条彩色条带，每个条带代表一个进程或线程。
注意：System Trace 本身会带来 5%-15% 的性能开销。我建议在真机上测试，模拟器数据不准。另外，抓 trace 时手机不要连着充电线——充电状态会影响 CPU 频率。
关键信号解读
| 信号名称 | 含义 | 正常表现 | 异常表现 |
|---|---|---|---|
| VSync | 垂直同步信号 | 每 16.7ms 一个脉冲 | 脉冲间隔不均 |
| SurfaceFlinger | 图层合成 | 耗时 < 4ms | 耗时 > 8ms |
| doFrame | 应用帧处理 | 耗时 < 12ms | 耗时 > 16ms |
| GPU Completion | GPU 渲染完成 | 与 doFrame 基本同步 | 明显滞后 |
我记得有一次，游戏在低端机上掉帧严重。用 System Trace 一看，SurfaceFlinger 耗时飙到 15ms。原因是 UI 层叠了太多透明图层，合成压力大。合并图层后，帧时间直接降了一半。
2.4 PerfDog：跨平台统一方案
如果你同时做 iOS 和 Android，或者需要给非技术人员看数据，PerfDog 是最省心的选择。它不需要 root，不需要越狱，插上手机就能用。
核心功能
- 实时帧率：显示当前 FPS 和帧时间曲线
- Jank 统计：自动标记卡顿帧（帧时间 > 50ms）
- CPU/GPU 占用：关联帧率变化
- 导出报告：生成 PDF 或 Excel，方便汇报
避坑指南：PerfDog 的 USB 连接线质量很重要。我曾经用了一根劣质线，数据一直跳，以为是手机问题。换了原装线，数据立刻稳定了。另外，测试时手机不要开省电模式，否则 CPU 会被限频。
实战对比
| 场景 | Chrome DevTools | System Trace | PerfDog |
|---|---|---|---|
| Web/H5 游戏 | ✅ 首选 | ❌ 不适用 | ✅ 可用 |
| Android 原生 | ❌ 不适用 | ✅ 首选 | ✅ 可用 |
| iOS 原生 | ❌ 不适用 | ❌ 不适用 | ✅ 首选 |
| 跨平台对比 | ❌ 不适用 | ❌ 不适用 | ✅ 首选 |
| 深度性能分析 | ✅ 够用 | ✅ 最强 | ⚠️ 一般 |
2.5 帧率测量工具选型流程图
下面这张图帮你快速决策：什么场景该用哪个工具。
2.6 三个工具的核心差异
| 维度 | Chrome DevTools | System Trace | PerfDog |
|---|---|---|---|
| 平台 | Web | Android | iOS + Android |
| 安装配置 | 浏览器自带 | 需安装 Python 工具 | 下载客户端即可 |
| 数据粒度 | JS 函数级 | 系统调用级 | 应用级 |
| 学习曲线 | 低 | 高 | 低 |
| 适合场景 | 快速定位 JS 问题 | 深度系统分析 | 日常监控、汇报 |
重要提醒：不管用哪个工具，测试环境一定要统一。我见过有人用开发机测帧率，后台跑着日志、调试器、模拟器，数据能好看才怪。测帧率时，关掉不必要的后台进程，手机调成飞行模式，屏幕亮度固定。
嗯，工具就这些。说白了，没有最好的工具，只有最合适的场景。Web 项目用 DevTools，Android 原生用 System Trace，跨平台或汇报用 PerfDog。下次遇到帧率问题，先想清楚你要查什么，再选工具。