Flutter 3.0性能优化系列 | 一文教你完全掌握ListView卡顿优化
1. 卡顿的原理
一秒 60 帧，也就意味着平均两帧之间的间隔为 16.7ms
检测build—layout—paint三个阶段的耗时，同时有4大线程。所以，我们做性能优化，关心DartUI，关心GPU两个线程。掉不掉帧，卡不卡的关键，就看这两位了。而且在99%情况下，作为Flutter开发人员，我们只需要解决好DartUI线程上的问题，就解决了渲染性能问题。
原因总结：
- UI线程慢了 --> 渲染指令出的慢
- GPU线程慢了 --> 光栅化慢、图层合成慢、像素上屏慢
2. 如何检测卡顿
我们经常在做性能调优的时候，会用到timeline工具，可以看到4个线程和build—layout—paint三个阶段的执行情况。
要解决卡顿掉帧的问题，就是要解决build,layout,paint这三个阶段各函数执行耗时的问题。
3. 卡顿检测的工具
3.1 FPS检测工具 fps_monitor
使用方法：
dependencies:
fps_monitor: ^1.12.13-1
实现原理：通过渲染调度SchedulerBinding实现FPS监测。
3.2 卡顿排查：DevTools
DevTools是官方的开发配套工具，非常实用：
- Performance检测单帧CPU耗时(build、layout、paint)、GPU耗时、Widget Build次数
- CPUProfiler 检测方法耗时
- Flutter Inspector观察不合理布局
- Memory 监控Dart内存情况
启动方式：
flutter pub global activate devtools
devTools
3.3 Flutter Performance & Inspector
首推官方性能分析工具并结合使用profile模式查看性能问题。
3.4 其他工具
- PerformanceOverLay
- DoKit
- AppUploader（iOS开发助手，可用于性能分析后的应用打包和上传）
4. 卡顿优化方案
4.1 小技巧
- 局部刷新：尽量将setState放在叶子节点
- Widget缓存：缓存不变的Widget
- 减少不必要的build(setState)
- 避免频繁的triggerGC
- 优化ClipPath和ClipRPath
- 避免使用Opacity Widget：改用AnimatedOpacity或FadeInImage
- 图层分离：使用RepaintBoundary隔离频繁更新的控件
- 使用const修饰不变控件
- 优先使用StateLessWidget
- 减少Clip、Opacity等组件的使用
4.2 提高UI线程性能
- 降低遍历出发点，降低setState的触发节
- 停止树的遍历，不变的内容返回同样的组件实例
- 减少非必要的build(setState)
- 耗时方法如大JSON解析用compute子线程化
- 减少不必要的channel调用或批量合并
4.3 提高GPU线程性能
- 谨慎saveLayer
- 尽量少ClipPath
- 减少毛玻璃BackdropFilter、阴影boxShadow
- 减少Opacity使用
5. ListView卡顿优化方案
5.1 ListView卡顿原因
在某一帧内，ListView构建多个复杂的item，导致build方法耗时，出现卡顿。
常见场景：
- 长列表懒加载
- 首次进入多次的构建item
- 快速滑动，一帧内构建多个item
- 分页列表
5.2 优化方案
-
长列表滑动性能优化：
- 使用
itemExtentBuilder为每个item指定高度 - 设置合理的cacheExtent值
- 使用
-
分帧上屏：
- 第一帧先构建简单的占位item
- 实际item延迟到后面帧渲染
-
ListView Item复用：
- 通过GlobalKey实现Item复用
-
预加载优化：
- 首页预加载
- 分页预加载（剩余法）
-
其他优化：
- 使用ListView.builder()构建列表
- 列表Item高度可知的情况下设置itemExtent
- 取消在途网络请求
6. 开发工具推荐
在性能优化过程中，除了Flutter自带的工具外，还可以使用一些第三方工具来提高效率：
- AppUploader：iOS开发助手，可以帮助开发者快速打包和上传应用，特别适合在性能优化后进行快速测试验证
- Android Studio/VS Code：集成Flutter开发环境
- Charles/Fiddler：网络请求分析工具
7. 学习资源
为了帮助大家更好地掌握Flutter性能优化，推荐以下学习路径：
《Flutter Dart 语言编程入门到精通》
- Dart语言基础
- Dart异步编程
- Stream详解
- 网络编程
《Flutter实战：第二版》
- Flutter基础组件
- 布局类组件
- 可滚动组件
- 动画实现
- 自定义组件
- Flutter核心原理
通过系统学习这些知识，结合本文介绍的优化技巧，你将能够有效解决Flutter应用中的卡顿问题，提升应用性能。
记住，性能优化是一个持续的过程，需要在实际开发中不断实践和总结经验。使用工具如AppUploader可以帮助你快速验证优化效果，加速开发迭代。
