文章 · Flutter 性能监测

性能优化的第一步不是“改代码”，而是可观测。没有监测，就没有诊断。本文给出一套可直接复用的 Flutter 性能监测范式。

1. 监测目标：先定指标

常见指标：

启动耗时（冷启动/首帧）
帧率（FPS）
卡顿（Jank）
页面切换耗时

指标明确后，才能合理埋点。

2. 启动耗时监测

用 Stopwatch 记录关键节点：

class StartupTracker {
  final Stopwatch _watch = Stopwatch()..start();

  void mark(String label) {
    final ms = _watch.elapsedMilliseconds;
    Log.d('startup', '$label ${ms}ms');
  }
}

把 mark 放在：

初始化开始
runApp
首帧完成（WidgetsBinding.instance.addPostFrameCallback）

3. FPS 与卡顿监测

用 SchedulerBinding 监听帧时间：

class FrameMonitor {
  void start() {
    SchedulerBinding.instance.addTimingsCallback((timings) {
      for (final t in timings) {
        final build = t.buildDuration.inMilliseconds;
        final raster = t.rasterDuration.inMilliseconds;
        if (build > 16 || raster > 16) {
          Log.w('jank', 'build=$build raster=$raster');
        }
      }
    });
  }
}

这能捕捉卡顿帧，并记录原因倾向（build vs raster）。

4. 页面切换耗时

结合 RouteObserver 统计：

class RoutePerfObserver extends RouteObserver<PageRoute<dynamic>> {
  final Map<String, Stopwatch> _timers = {};

  @override
  void didPush(Route route, Route? previousRoute) {
    _timers[route.settings.name ?? 'unknown'] = Stopwatch()..start();
  }

  @override
  void didStopUserGesture() {
    _timers.forEach((name, sw) {
      Log.d('route', '$name cost ${sw.elapsedMilliseconds}ms');
    });
  }
}

5. 线上可观测：日志 + 上报

监测不落地就没有意义，建议：

本地日志：开发阶段快速定位
线上上报：聚合分析与趋势判断

上报内容：

启动耗时
卡顿频次
页面切换耗时

6. 监测清单

启动耗时埋点
帧率与卡顿监测
页面切换耗时
线上上报

总结

性能监测是优化的前置条件。只有把数据采集体系建立起来，性能问题才能从“体验”变成“指标”。