本篇记录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内存泄漏怎么去排查,还没有任何头绪. 期待大佬们的交流
网友评论