从渲染流程、数据处理结构聊聊Flutter性能优化

news2024/11/24 8:55:01

不可否认 Flutter 是一个非常强大的移动应用开发框架，我们在技术架构选型时就是选用的 Flutter，特别是跨端能力属实很优秀，but 也逐渐发现在复杂的应用程序实现中，App 的性能会受到一些影响。

其实这个问题，我们内部也有发现，但是出于优先级的考虑，性能优化的需求一直没有排到迭代中，但是产品运营陆陆续续有接到用户反馈使用体验的问题，我们才把这个需求往前提，在需求评审和技术讨论后有一些实现路径结论，也借机在这里进行分享和交流。

Flutter 的渲染流程

在优化 Flutter 应用的性能之前，首先很有必要了解其渲染流程，理解这个流程对于性能优化至关重要。

Flutter 的渲染流程主要分为三个阶段：构建、布局和绘制。

在构建阶段，Flutter会创建和配置widget；
在布局阶段，Flutter会确定每个widget的位置和大小；
在绘制阶段，Flutter会将widget绘制到屏幕上。

在Flutter中，构建过多的widget会消耗大量的CPU资源，从而影响应用的性能。因此，我们应尽量减少构建的widget数量。例如，我们可以使用ListView.builder来构建列表，而不是使用ListView。因为ListView.builder只会构建屏幕上可见的widget，而ListView则会构建所有的widget。

2. 避免不必要的重绘

在Flutter中，如果一个widget的状态发生改变，那么这个widget以及其所有的子widget都会被重绘。因此，我们应该尽量避免不必要的重绘。例如，我们可以使用const来创建常量widget，这样这个widget就不会被重绘了。另外，我们也可以使用RepaintBoundary来隔离需要重绘的widget，这样就可以减少不必要的重绘。

Flutter 的数据处理结构

在处理大量数据时，使用正确的数据结构和算法是非常重要的。

1、巧用链表（LinkedList）

如果我们需要在列表中查找元素，那么使用哈希集（HashSet）会比使用列表（List）更高效。因为在哈希集中查找元素的时间复杂度是O(1)，而在列表中查找元素的时间复杂度是O(n)。同样，如果我们需要频繁地在列表中添加或删除元素，那么使用链表（LinkedList）会比使用数组（Array）更高效。

2、使用懒加载

在处理大量数据时，我们可以使用懒加载来提高应用的性能。懒加载是一种只在需要时才加载数据的技术。例如，我们可以使用FutureBuilder或StreamBuilder来实现懒加载，这样就可以避免一次性加载所有的数据，从而减少内存的使用。

使用性能分析工具

Flutter其实有提供了一些性能分析工具，如 Flutter DevTools 和 DartDevTools。

如果我们多善用这些工具可以帮助我们找出性能瓶颈，从而进行针对性的优化。

例如，我们可以使用 Flutter DevTools 的 Timeline 视图来查看应用的帧率，以及每一帧的构建、布局和绘制时间。我们也可以使用 Dart DevTools 的 CPU 分析器来查看 CPU 的使用情况，以及每个函数的执行时间。

此外，我们在技术讨论的时候也发现，从图片缓存、JSON序列化、反序列化和拓展工具也可以实现。

在Flutter中，可以使用缓存来提高应用的性能。例如，我们可以使用图片缓存（ImageCache）来缓存图片，这样就可以避免每次都从网络上下载图片。另外，我们也可以使用Memoization技术来缓存函数的结果，这样就可以避免重复计算。

有些操作，如 JSON 序列化和反序列化，如果直接使用 Dart 的核心库进行操作，可能会影响应用的性能。因此，我们可以使用专门的库，如 json_serializable 和 built_value，来进行这些操作。

如果我们考虑从H5角度进行优化，我也非常建议使用小程序替代H5，让过往开发的小程序直接运行在 Flutter 开发的应用中，同样一个功能业务仅需一次小程序开发，即可实现在除了微信端的其它 App 中也运行起来，由于双线程技术会使得效果明显优于H5，白屏和卡顿的情况大大减少。原理其实很简单的，FinClip 提供了小程序 SDK给 Flutter 应用进行集成，这样一来 App 即拥有了一套可运行小程序业务代码的宿主环境。