面试题：如何通过Flutter的渲染机制优化重绘问题

Question

基于Flutter的渲染机制，说明从布局构建、绘制到合成这一系列过程中，有哪些具体的优化点可以减少不必要的重绘，以及怎样实现这些优化。

Answer 1

布局构建优化点及实现

1. 减少嵌套层级
   • 优化点：Flutter布局嵌套过多会增加布局计算量，导致不必要的重绘。
   • 实现方式：尽量扁平化布局结构，例如使用Row、Column等简单布局组合替代多层Stack嵌套。比如原本使用多层Stack来排列几个元素，可以尝试使用Row和Column组合实现同样效果。
2. 使用const构造函数
   • 优化点：如果布局中的某些组件属性在编译时就确定且不会改变，使用const构造函数可以让Flutter在构建时直接确定其布局信息，无需在运行时重复计算。
   • 实现方式：例如const Text('固定文本')，const Container(width: 100, height: 100)等，对于不变化的组件和属性使用const声明。
3. 按需构建布局
   • 优化点：对于一些在特定条件下才显示的布局，可以延迟构建，避免不必要的布局计算和重绘。
   • 实现方式：使用Visibility组件，通过控制visible属性来决定是否构建子组件，或者使用if - else语句在构建方法中根据条件决定是否返回某部分布局。例如：

if (condition) {
  return Text('条件满足时显示');
} else {
  return Container();
}

绘制优化点及实现

1. 缓存绘制
   • 优化点：对于一些不经常变化的绘制内容，可以进行缓存，避免重复绘制。
   • 实现方式：使用RepaintBoundary组件，它会创建一个新的绘制层，当该组件内的内容没有变化时，Flutter不会重新绘制该层。例如将一些静态图标或者背景图案放在RepaintBoundary内。
2. 避免不必要的动画重绘
   • 优化点：如果动画不是全局需要实时更新的，避免在根Widget上添加动画，防止动画引起的重绘影响到不必要的部分。
   • 实现方式：将动画限制在需要的局部组件上，例如使用AnimatedWidget或者AnimatedBuilder来局部控制动画，只在动画相关的组件发生变化时重绘。

合成优化点及实现

1. 减少合成层数量
   • 优化点：过多的合成层会增加合成的开销，因为每个合成层都需要单独处理和合并。
   • 实现方式：尽量将相关元素合并到同一合成层。例如对于一些相对位置固定且不需要单独处理的元素，可以将它们放在同一个容器组件中，这样它们会在同一个合成层进行处理。
2. 使用Offstage控制显示隐藏
   • 优化点：当一个组件不需要显示时，使用Offstage可以将其从合成树中移除，减少合成计算量。
   • 实现方式：通过控制Offstage的offstage属性为true或false来决定组件是否参与合成。例如：

Offstage(
  offstage:!showComponent,
  child: MyComponent(),
)