Flutter 优化记录(持续完善~)

本篇记录App优化方法,配合工具,可以排查部分的性能和渲染问题.

调试性能问题

1. 跟踪启动时间

flutter run --trace-startup --profile

跟踪输出保存为start_up_info.json, 输出列出了从应用程序启动到这些跟踪事件（以微秒捕获）所用的时间：

• 进入Flutter引擎时.
• 展示应用第一帧时.
• 初始化Flutter框架时.
• 完成Flutter框架初始化时.

2. 跟踪Dart代码性能

import "dart:developer"

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

可视化调试

MaterialApp 设置选项

1. debugPaintBaselinesEnabled

具有基线的对象，文字基线以绿色显示，表意(ideographic)基线以橙色显示。

2. debugPaintPointersEnabled

正在点击的对象都会以深青色突出显示。 可以帮助确定某个Widget是否以某种不正确地方式进行hit测试.

3. debugPaintLayerBordersEnabled

标志用橙色或轮廓线标出每个层的边界，或者使用debugRepaintRainbowEnabled志， 只要他们重绘时，这会使该层被一组旋转色所覆盖。

4. checkerboardRasterCacheImages

光栅缓存图像检查

5. checkerboardOffscreenLayers

离屏渲染检查

优化

* 合理使用const关键词

当const 修饰类的构造函数时，它要求该类的所有成员都必须是final的。const 变量只能在定义的时候初始化。
详细参见: 地址

减少内存占用

* 离屏渲染

一下小部件底层会滴哦啊用saveLayer(),造成离屏渲染:

• ShaderMask
• ColorFilter
• Chip，当 disabledColorAlpha != 0xff 的时候，会调用saveLayer()。
• Text，如果有 overflowShader，可能调用 saveLayer() .

官方推荐用法:

• 由于 Opacity 会使用屏幕外缓冲区直接使目标组件中不透明，因此能不用 Opacity Widget，就尽量不要用。有关将透明度直接应用于图像的示例，请参见 Transparent image，比使用 Opacity widget 更快，性能更好。
• 要在图像中实现淡入淡出，请考虑使用 FadeInImage 小部件，该小部件使用 GPU 的片段着色器应用渐变不透明度。
• 很多场景下，我们确实没必要直接使用 Opacity 改变透明度，如要作用于一个图片的时候可以直接使用透明的图片，或者直接使用 Container：Container(color: Color.fromRGBO(255, 0, 0, 0.5))
• Clipping 不会调用 saveLayer()（除非明确使用 Clip.antiAliasWithSaveLayer），因此这些操作没有 Opacity 那么耗时，但仍然很耗时，所以请谨慎使用。
• 要创建带圆角的矩形，而不是应用剪切矩形，请考虑使用很多 widget 都提供的 borderRadius属性。

* 图片

• 参照原生开发, 裁剪加载图片尺寸
• 动态图片导致的rebuild问题,嵌套一层RepaintBoundary来解决.
• 图片内存回收

以上优化方向配合调试工具,基本可解决大部分优化的问题.

ps: 关于BuildContext内存泄漏怎么去排查,还没有任何头绪. 期待大佬们的交流