Flutter UI jank

Posted on Edited on Views:

実際のところ

  1. excel 格式尽量优化，能合并的尽量合并
  2. 因为前半部分合并单元格，后半部分没有合并，导致后半部分的 row 都另起一行重新渲染了，解决这个问题解决了大部分问题
  3. 之前都是存在横向的合并单元格，纵向的没遇到，这次完整了
  4. 不过性能还是要涉及到，多问问 ai 练习练习

o1

在 Flutter 开发过程中，如果在 Debug 控制台看到 “I/Choreographer: Skipped XX frames! The application may be doing too much work on its main thread.” 或类似的 “UI jank detected” 警告，说明在某些帧里，界面绘制没有在预期的 16ms（或更短）时间内完成，就出现了明显的掉帧或卡顿（Jank）。

下面介绍一些如何处理 UI jank以及如何调试的思路和技巧。

1. 为什么会出现 UI jank

  1. 主线程负担过重
    Flutter 中绝大部分工作（如构建、布局、绘制指令生成）都在 Dart 的单线程（UI Thread）上执行，如果你在此线程里做了大量的同步计算（如复杂的 JSON 解析、大量循环计算、或阻塞 I/O），就会堵塞绘制，造成掉帧。
  2. 过度 rebuild
    如果在每帧（或每次动画）都 setState 导致整棵 Widget Tree rebuild，或在 build() 里做大量繁重操作，就会增加帧耗时。
  3. 图片解码/加载开销
    一些大的图片，解码/缩放/缓存也会占用主线程资源。如果不做懒加载，就在同一时间内加载和解码大量图片，可能导致 jank。
  4. 不合理的渲染层级
    Flutter 复杂的叠层过多（大量重叠或过度使用 Opacity），也会造成绘制压力增大。
  5. 动画刷新频率高
    在某些动画或滚动场景里，每帧都计算大量内容，可能导致帧率跌落。

2. 如何调试和定位 jank

2.1 Flutter 的 Performance Overlay (性能叠层)

你可以在 MaterialApp 或者 WidgetsApp 中启用性能叠层：

MaterialApp(
  showPerformanceOverlay: true,
  // ...
);

在 App 界面右上角会出现两个图表：

  • 上半部分：GPU 图表（图形线程）。
  • 下半部分：UI 图表（Dart 主线程）。

当柱状图越高，说明该帧耗时越长。如果有一部分柱子“越过”虚线，就表示帧耗时超过 16ms（即掉帧）。你可以观察在出现 jank 时是哪边柱状图飙升，是在 GPU 还是在 UI 线程。

2.2 使用 Flutter DevTools（Timeline / Performance）

  1. 在 IDE（如 Android Studio、VS Code）或命令行启动 flutter run --profile 或 flutter run --release（Profile 更适合调试性能）。
  2. 在浏览器或 IDE 中打开 DevTools，进入 Performance 页签。
  3. 进行交互或操作，点击 Record 录制一段时间，停止后查看 Flame Chart。
  4. 在 Flame Chart 里可以看到每帧中都调用了哪些函数，哪个阶段耗时过长，以此定位到卡顿的原因（比如：某个大的循环、某个图片解码等）。

2.3 日志/埋点

  • 如果有怀疑点，可以在 build() 或 setState() 前后打印日志做简单的耗时统计；也可以在业务逻辑里加上一些事件埋点。

3. 常见的优化思路

  1. 将耗时操作放到后台 Isolate
    • 如果在主 Isolate（UI Thread）中做了复杂计算或阻塞 I/O，可以使用 compute(...) 或自己创建 Isolate 在后台线程处理，避免阻塞 UI。
  2. 分离 / 减少 Widget rebuild
    • 避免在父级 setState 时重建所有子 Widget。可以将变动频繁的子 Widget 拆分出去，或使用 ValueListenableBuilder/StreamBuilder 让局部刷新。
    • 对一些静态/不变的 Widget，尽量用 const 构造。
  3. 懒加载 / 虚拟滚动
    • 如果在一个大列表（ListView / Table / Grid）中，有成百上千的项目，务必使用 ListView.builder / SliverList 等按需加载，不要一次性构建所有子组件。
    • 大图片也需懒加载，并使用缓存以免每次都解码。
  4. 缩小图片 / 压缩
    • 如果图片很大，可以使用后端接口返回缩略图，或在 Flutter 端指定 cacheWidth/cacheHeight 来在解码时缩小尺寸。
  5. 避免动画过于复杂 / 帧动画
    • 如果需要高帧率动画，要确保每帧更新的计算量足够小。必要时使用 TweenAnimationBuilder、AnimatedBuilder 等轻量控件。
  6. 避免过度使用 Opacity
    • 在动画中频繁改变 Opacity 会导致图层合成开销，可以尝试用 AnimatedSwitcher 或 FadeTransition，或重新布局替换，以减少重复绘制。
  7. Release / Profile 模式测试
    • Debug 模式下有额外的调试开销，Release 可能更流畅。但性能问题也要在 Profile / Release 下做真实验证。

4. 一些快速检查清单

  1. 日志是否频繁打印：大量的 log.debug 打印也会导致卡顿。
  2. 是否有大循环 / 密集计算：如嵌套循环、图表绘制、加密解密等都要放到 Isolate。
  3. 渲染层级：查看是否大量叠层，或者有一些不必要的 Stack、Opacity、ClipRect。
  4. 动画帧：对关键动画场景做 DevTools 录制，看 flame chart 哪里耗时最大。
  5. 内存：当内存不足时，系统也可能出现掉帧，要监控内存使用情况。

结论

  • 需要处理：当出现“UI jank detected”时，说明用户体验会有卡顿感，最好通过上述工具来调试、定位，并针对问题所在做性能优化。
  • 如何调试：主要使用 Performance Overlay 或 DevTools（Performance 页签 + Timeline / Flame Chart）来找出具体瓶颈。
  • 如何优化：常见方式包括把耗时计算放到后台 Isolate，减少 Widget rebuild，使用懒加载处理长列表和大图片，尽量降低主线程负担等。

只要掌握了上述调试方法和常见优化手段，一般都能逐步排查并解决 Flutter 项目中的 UI jank 问题。祝你调试顺利！