Flutter性能优化

性能分析工具

（1）performance overlay

开启performance overlay后，Flutter APP上将显示一个展示一个浮层，浮层中会实时展示当前的UI线程及Raster线程的运行情况。如果都是蓝色竖条，说明界面运行流畅，否则则是出现掉帧。

performance overlay可以直接通过代码开启：

Dart 复制代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      //开启性能监控浮层
      showPerformanceOverlay: true,

      title: 'MyApp',
      home: MyHomePage(title: 'My Awesome App'),
    );
  }
}

也可以在Debug过程中，在VSCode右侧的Performance 中点击 Toggle Performance Overlay 开启。

（2）DevTools

使用DevTools除了可以像performance overlay那样查看App的运行情况，还会录制具体的每一帧绘制及渲染的详细过程，并且允许用户选择任何一帧，查看其运行详情。

比较重要的主要是Enhance Tracing中的几个选项

选取Track Widgets Build，可以查看某一帧build执行的详情

如果发现build执行的层级比较深，则说明是一个比较"大"的Widget执行了重建。那我们就需要研究下这种重建是否是必要的。比如，如果只是其中某个小组件的数据发生了变化，就可以优化只对小组件进行重建。又比如，数据未发生变化，但重建的频率非常高，则需要看一下导致重建的原因，看是否可以取消执行这种不必要的逻辑。

选取TrackPaints，则可以追踪当前帧绘制的主要逻辑

如果发现paint的层级比较深，则很可能是有比较大的Widget执行了绘制相关逻辑，那么就可以看下这种大Widget执行重绘是什么引起的，以及是否有必要。如果是小组件的重绘导致的，可以尝试用RepaintBoundary包裹小组件，使得重绘仅限于小组件自身。

性能优化总结

（1）图片等资源访问使用内存缓存及本地文件缓存。Flutter对GlobayKey组件有缓存，对构建复杂，并且复用率比较高的组件，合理使用GlobayKey可以提升性能。但需注意，使用GlobayKey查找组件state是全局查找，有较大性能开销，查找不能滥用。
（2）提高build效率：避免大的widget反复重新build：将需要重新build的子widget改为自定义的statefulWidget，在该widget内调用setState进行重新构建，而不是对整个大的widget都重新构建；或者用consumer实现局部刷新。

（3）提高Paint效率，需要重绘的widget用RepaintBoundary包住，变为其child，进而创建一个单独的layer，对其重绘制不影响其它组件。适合用RepaintBoundary包住的组件主要是两类，一是需要频繁重绘的组件，使用RepaintBoundary后就可以不影响其它组件；另一种是绘制比较复杂的小组件，而除了该组件外其他组件不会变化，也适合用RepaintBoundary将其变为一个独立的图层以提升效率。

（4）尽量多使用const实例或widget 的const构造方法，能用statelessWidget实现的就不要用StatefulWidget实现。尽量利用缓存，减少组件的重新渲染。

（5）build方法中耗时使用异步，更耗时的计算操作可以使用compute启用多线程。但要注意， Flutter中开启线程实际会创建一个新的isolate，线程启动不仅耗时，还会增加内存占用，开启线程应避免滥用

（6）尽量减少Widget子组件的层级。比如Row或者Column组件中减少Padding的使用，用sizebox来实现组件位置的偏移

（7）ListView应采用build方法进行按需构建，避免一次性构建过多的item，或者使用性能更好的CustomScrollView；可折叠的listview在折叠状态时，设itemCount为0；尽量避免设置widget为半透明，避免下方内容不必要的绘制，可以用截图来实现半透效果。

（8）降级CustomScrollView,ListView上下各250高度的执行渲染，这就是预渲染区。预渲染区在性能较差机器可以通过参数调整到更小的高度。此外，Flutter为提升Listview滚动性能，默认会用widget包裹Listview中的子组件，并让被包裹的组件仅绘制一次，但这会带来更大的内存占用。如果内存资源比较稀缺，可以通过ListView的addAutomaticKeepAlives和addRepaintBoundaries属性禁用该特性。

Dart 复制代码

ListView.builder(
  ...
  addAutomaticKeepAlives: false (true by default)
  addRepaintBoundaries: false (true by default)
);

如果ListView和Gridview中Item的高度时固定的，还可以使用itemExtent实现滚动条大高度滚动的效率。

（9）减少图像裁剪性能开销：尽量少用ClipRRect组建，改为使用BoxDecoration组件的image属性。