第三课：FPS监控实战

各位同学，今天我们来聊聊FPS监控。说实话，FPS这个词在移动开发圈子里都快被说烂了，但真正能把它玩明白的人，其实不多。

我个人习惯把FPS比作汽车的仪表盘。你开车时不会一直盯着转速表看，但一旦感觉车子抖了、加速无力了，第一反应就是瞄一眼仪表盘。FPS监控也是这个道理——它不是让你天天盯着看，而是当用户反馈「卡」的时候，你能拿出数据说话。

一、Flutter自带的PerformanceOverlay

Flutter框架其实已经给我们准备了一个现成的工具——PerformanceOverlay。这东西怎么打开呢？很简单，在MaterialApp里加一行代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      showPerformanceOverlay: true,  // 这行就是开关
      home: MyHomePage(),
    );
  }
}

打开之后，屏幕右上角会出现两个实时滚动的图表。上面那条是GPU线程的帧渲染时间，下面那条是UI线程的构建时间。每条横线代表一帧，如果某条线超过了16ms那条红线，就说明这一帧掉帧了。

我在项目中遇到过一种情况：UI线程全是绿的，但GPU线程经常飘红。当时排查了半天，最后发现是某个自定义的Shader太复杂了。你想想看，如果只看UI线程，你可能会误判问题方向。

二、自定义FPS监控器

PerformanceOverlay虽然方便，但有个硬伤：它只能看，不能记录。你想统计用户在整个使用过程中的平均帧率？做不到。这时候就需要我们自己动手写一个FPS监控器了。

核心思路其实不复杂：利用Flutter的SchedulerBinding来监听每一帧的回调。

class FpsMonitor {
  int _frameCount = 0;
  double _startTime = 0;
  double _fps = 0;
  
  void start() {
    SchedulerBinding.instance.addPostFrameCallback(_onFrame);
  }
  
  void _onFrame(Duration timestamp) {
    _frameCount++;
    double now = DateTime.now().millisecondsSinceEpoch.toDouble();
    
    if (now - _startTime >= 1000) {
      _fps = _frameCount * 1000 / (now - _startTime);
      _frameCount = 0;
      _startTime = now;
      
      // 这里可以回调给UI层展示
      print('当前FPS: $_fps');
    }
    
    SchedulerBinding.instance.addPostFrameCallback(_onFrame);
  }
  
  double get fps => _fps;
}

这段代码的逻辑说白了就是：每渲染一帧就计数一次，每秒统计一次帧数。注意看，我用了addPostFrameCallback而不是addPersistentFrameCallback，区别在于前者只监听渲染完成的帧，后者连被跳过的帧也算进去——这会导致数据不准。

三、帧率掉帧分析

拿到FPS数据只是第一步，真正有价值的是分析掉帧原因。我一般把掉帧分为三类：

类型	特征	常见原因
UI线程掉帧	图表中UI线飘红	build方法太复杂、大量Widget重建
GPU线程掉帧	图表中GPU线飘红	过度绘制、复杂Shader、图片解码
突发性掉帧	偶尔出现尖峰	网络请求、文件IO、GC触发

怎么定位具体问题呢？我分享一个实战中总结的排查流程：

1. 先看是UI还是GPU——PerformanceOverlay一眼就能看出来
2. 如果是UI线程，打开Flutter DevTools的Widget Inspector，看看是不是有Widget在不该重建的时候重建了
3. 如果是GPU线程，用DevTools的Raster View看看有没有过度绘制
4. 如果是突发性掉帧，在关键操作前后打日志，看是不是有同步的网络请求或文件读写

举个例子。我之前接手过一个电商项目，商品列表页滑动时FPS经常掉到30以下。用PerformanceOverlay一看，GPU线程飘红严重。打开Raster View，好家伙，整个页面被绘制了5层！

原因是什么？列表项里用了Container嵌套Card嵌套Material，每一层都有自己的背景色和阴影。说白了就是过度绘制。解决方案很简单：去掉多余的背景色，用ClipRect裁剪掉不可见区域。改完之后FPS稳定在55以上。

四、知识体系总览

下面这张图是我自己整理的FPS监控知识体系，你可以把它当作一个检查清单：

这张图把整个FPS监控的脉络理清楚了。从左到右分别是工具层、数据层、分析层。我个人习惯在项目初期就把自定义监控器集成进去，这样上线后能持续收集用户端的FPS数据。你想想看，开发机上跑得再流畅，到了用户的老手机上可能就卡成PPT了。

---

公众号:蓝海资料掘金营，微信deep3321