Flutter 性能调优

一、GPU线程问题

性能图层需要以分析模式启用应用。通过真机进行检测，因为相比发布模式，调试模式增加了额外的检查，这些检查会耗费很多资源。在JIT模式下执行代码效率较低，无法真实反映出它的性能问题。另一方面模拟器使用的是X86指令集，真机是ARM，两种方式二进制执行行为都不一样，一些在X86执行比较快的操作在真机执行会慢，这使得得用真机才能评估出出现的性能问题。

flutter run --profile

性能图层Performance Overlay

性能图层会在当前应用的最上层，以flutter引擎自绘的方式展示GPU和UI线程执行的图表，而每一张图表代表当前线程最近300帧的表现

为了保持60Hz的刷新频率，GPU线程和UI线程执行每一帧耗费的时间都应该小于16ms。

如果GPU线程图表出现红色竖条意味着渲染的图形太复杂，导致无法快速渲染，如果在UI线程中出现意味着

Dart代码消耗了大量资源。需要优化代码执行时间。

两个参数图层渲染开关checkerboardOffscreenLayers和检查缓存的图像开关checkerboardRasterCacheImages

只要在应用初始化方法中将checkerboardOffscreenLayers开关设置成true，分析工具就会自动检测多视图叠加的情况。

适用场景：比较底层的绘制方法，在设涉及需要裁剪或者半透明的场景中间接使用。

从资源角度看，就是渲染图像，这是因为图像的渲染涉及I/O 、GPU储存，以及不同通道数据格式转换，

因此渲染过程中的构建需要消耗大量资源。为了缓解GPU的压力，flutter提供了多层缓存快照。这样widget重建时，就无需重新绘制静态图像了。

检查缓存图像的开关checkerboardRasterCacheImages，来检测在界面重绘时频繁闪烁的图像。

需要静态缓存的图像加到RepaintBoundary中，RepaintBoundary可以确定Widget树的重绘边界，如果图像足够复杂，flutter引擎会自动将其缓存，避免重复刷新。

二、UI线程问题

UI线程问题发现的是应用性能瓶颈，比如在视图build时候一些复杂运算，或者主isolate中进行了同步操作，这些都会增加CPU处理时间，拖慢应用响应速度。

Performance工具

 

 

通常来说，由于 Flutter 采用基于声明式的 UI 设计理念，以数据驱动渲染，并采用 Widget->Element->RenderObject 三层结构，屏蔽了无谓的界面刷新，能够保证绝大多数情况下我们构建的应用都是高性能的，所以在使用分析工具检测出性能问题之后，通常我们并不需要做太多的细节优化工作，只需要在改造过程中避开一些常见的坑，就可以获得优异的性能。比如：控制 build 方法耗时，将 Widget 拆小，避免直接返回一个巨大的 Widget，这样 Widget 会享有更细粒度的重建和复用；尽量不要为 Widget 设置半透明效果，而是考虑用图片的形式代替，这样被遮挡的 Widget 部分区域就不需要绘制了；对列表采用懒加载而不是直接一次性创建所有的子 Widget，这样视图的初始化时间就减少了。

 

 

参考资料：

https://time.geekbang.org/column/article/138877