Flutter : 关于优化

写在前面

Flutter 的优化方法有很多，这里对目前所知道的一些做记录，后续了解的更多了，再做进一步的开展。

内容

启动耗时检测

使用命令行flutter run --trace-startup --profile运行程序，在 build 目录下会生成start_up_info.json和start_up_timeline.json两个文件，里面有相关统计时间的检测数据。

参考

Flutter 性能优化的利器 —— Tracing

调试

MaterialApp 的几个调试选项

• showPerformanceOverlay
  • 为 true 的时候，会在 app 上显示 UI 帧率和 GPU 帧率，关注哪些操作会导致数据显示红色。
• checkerboardRasterCacheImages
  • 为 true 的时候表示开启静态缓存图片的检查
• checkerboardOffscreenLayers
  • 为 true 时用于检测离屏渲染的情况，让我们注意到哪些地方使用到了saveLayer

跟踪 Dart 代码的性能

我们想自己跟踪某部分 Dart 代码的性能的话，可以使用dart:developer包下的Timeline类，来包裹我们想要测量的代码。

import 'dart:developer';

Timeline.startSync('interesting function');
// iWonderHowLongThisTakes();
Timeline.finishSync();

然后就打开我们的工具进行查看，要记得在 profile 模式下运行。

参考

Flutter 性能优化 Tips
Flutter performance profiling
Debugging Flutter apps programmatically

CustomPainter

CustomPainter的构造函数里带有Listenable类型的repaint参数，当我们继承它实现的时候，可以把我们的AnimationController传给它，这样刷新部分就只限定在我们的CustomPainter里了，而不用在外面监听然后setState()。

假如说现在绘制一个类似时钟或是棋盘的布局，它有变与不变的部分，为了避免不变的背景部分重复绘制，需要将他们拆分成两个不同的CustomPainter，然后给变化的部分套上RepaintBoundary，让重绘部分只发生在变化那里即可。

参考

CustomPainter 正确刷新姿势

analysis_options

通过在我们的项目目录下新建一个analysis_options.yaml文件，然后添加一些规则，可以帮助我们检测不好的代码和提示如何修正代码。

参考

Customizing static analysis
Flutter Analysis Options

网络优化

Http2

如果使用 Dio 的话，可以使用它的 dio_http2_adapter 对其增加 Http2 的支持。

如果不是的话，可以直接使用 http2 进行相关实现。

Http2 做了一些改善，例如压缩了头部、用二进制分帧替换了原先文本形式的数据（二进制解析数据更快）、通过创建流实现双向数据流还有连接复用等。

Gzip

在使用 Dio 的时候，也可以把数据用 Gzip 进行传输，使用GZipCodec类对发送数据进行encode()，然后用流的形式传输。但好像不能传输过大的数据。

// Binary data
List<int> postData = <int>[...];
await dio.post(
  url,
  data: Stream.fromIterable(postData.map((e) => [e])), //create a Stream<List<int>>
  options: Options(
    headers: {
      HttpHeaders.contentLengthHeader: postData.length, // set content-length
    },
  ),
);

参考

一文读懂 HTTP/2 特性
Is there a way to gzip request? #307