flutter 性能优化

中文文档：https://flutter.cn/docs/testing/best-practices
英文文档：https://flutter.dev/docs/perf/rendering/best-practices

官网描述，通常来说，利用Flutter技术构建的应用程序在默认情况下都是高性能的，所以只需要避开常见的陷阱即可，没有必要使用复杂的分析工具对细节做优化。

最佳实践

1、关于build方法

• 避免在build()方法中做重复性和比较耗时的工作，因为在父Widget重建时，子Widget的build()方法会被频繁的调用
• 当在 State 上调用 setState()时，所有后代 Widget 都将重建。因此，将 setState() 的调用转移到其 UI 实际需要更改的 Widget 子树部分。如果改变的部分仅包含在 Widget 树的一小部分中，请避免在 Widget 树的更高层级中调用 setState()。
• 当重新遇到与前一帧相同的子 Widget 实例时，将停止遍历。这种技术在框架内部大量使用，用于优化动画不影响子树的动画。请参阅 TransitionBuilder 模式和使用此原则的 SlideTransition，以避免在动画过程中重建其后代 Widget。

2、对列表和网格列表懒加载

3、尽量少使用效果（effects）

• 官网描述一些效果的背后可能会调用saveLayer() ，这个方法的代价很大
• 尽量不要使用Opacity这个Widget，这个Widget是改变透明度用的，
  推荐使用这种方式：

Image.network(
  'https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg',
  color: Color.fromRGBO(255, 255, 255, 0.5),
  colorBlendMode: BlendMode.modulate
)

官网描述：如果对Opacity做动画时，对导致每帧都会创建，会不流畅，推荐使用AnimatedOpacity代替

• ShaderMask
• ColorFilter
• Text—might cause call to saveLayer() if there’s an overflowShader
  这个overflowShader没查出来是怎么用的

4、尽量避免使用可能调用saveLayer的Widget

• 例如要实现淡入淡出，不适用Opacity，而使用FadeInImage
• 要创建带圆角的矩形，而不是应用剪切矩形，请考虑使用很多 widget 都提供的 borderRadius属性。

陷阱

• 避免使用 Opacity widget，尤其是在动画中避免使用。请用 AnimatedOpacity 或 FadeInImage 进行代替。更多信息，请参阅 Performance considerations for opacity animation。

• 使用 AnimatedBuilder 时，请避免在不依赖于动画的 widget 的构造方法中构建 widget 树。动画的每次变动都会重建这个 widget 树。而应该构建子树的那一部分，并将其作为 child 传递给 AnimatedBuilder。

• 避免在动画中剪裁。如果可能，请在动画开始之前预先剪切图像。

• 如果大多数 children widget 在屏幕上不可见，请避免使用返回具体列表的构造函数（例如 Column()或 ListView()），以避免构建成本。

更多

要了解更多性能信息，请参见以下资源：

• AnimatedBuilder API 页面的 Performance optimizations 部分；

• Opacity API 页面的 Performance considerations for opacity animation 部分；

• ListView API 页面中 Child elements’ lifecycle，以及如何高效加载元素；

• StatefulWidget 的 Performance considerations API 文档。