The performance optimization of Flutter is a continuous process, which requires us to continuously learn and practice. The goal of optimization is not only to improve the running speed of the application, but also to improve the response speed of the application, reduce the memory usage of the application, and improve the energy efficiency of the application.
Hopefully our in-depth exploration of these practical tips and best practices will help improve the performance of your apps when building them with Flutter. It is undeniable that Flutter is a very powerful mobile application development framework. We chose Flutter when we selected the technical architecture, especially the cross-terminal capability is really excellent, but we gradually found that in the implementation of complex applications, the performance of the App will be affected. suffer some influence.
In fact, we have also discovered this problem internally, but out of priority considerations, the need for performance optimization has not been included in the iteration, but product operations have received user feedback one after another about the user experience, so we have put this need in the future. The premise is that after the requirements review and technical discussion, there are some realization path conclusions, and I also take the opportunity to share and communicate here.
Flutter's rendering process
Before optimizing the performance of a Flutter application, it is necessary to understand its rendering process, which is crucial to performance optimization.
Flutter's rendering process is mainly divided into three stages: construction, layout and drawing.
- During the build phase, Flutter creates and configures widgets;
- In the layout phase, Flutter will determine the position and size of each widget;
- During the drawing phase, Flutter will draw the widget to the screen.
1. Limit the number of widgets used
In Flutter, building too many widgets will consume a lot of CPU resources, thus affecting the performance of the application. Therefore, we should minimize the number of widgets we build. For example, instead of using ListView, we can use ListView.builder to build the list. Because ListView.builder will only build widgets that are visible on the screen, while ListView will build all widgets.
2. Avoid unnecessary redrawing
In Flutter, if the state of a widget changes, the widget and all its child widgets will be redrawn. Therefore, we should try to avoid unnecessary redrawing. For example, we can use const to create a constant widget so that the widget won't be redrawn. In addition, we can also use RepaintBoundary to isolate widgets that need to be redrawn, so that unnecessary redrawing can be reduced.
Flutter's data processing structure
When working with large amounts of data, it is very important to use the correct data structures and algorithms.
1. Skillfully use linked list (LinkedList)
If we need to find an element in a list, then using a hash set (HashSet) will be more efficient than using a list (List). Because the time complexity of finding an element in a hash set is O(1), while the time complexity of finding an element in a list is O(n). Similarly, if we need to frequently add or delete elements in the list, then using a linked list (LinkedList) will be more efficient than using an array (Array).
2. Use lazy loading
When dealing with large amounts of data, we can use lazy loading to improve the performance of the application. Lazy loading is a technique of loading data only when needed. For example, we can use FutureBuilder or StreamBuilder to implement lazy loading, so that we can avoid loading all the data at one time, thereby reducing memory usage.
Use performance analysis tools
Flutter actually provides some performance analysis tools, such as Flutter DevTools and DartDevTools.
If we make good use of these tools, it can help us find performance bottlenecks and make targeted optimizations.
For example, we can use the Timeline view of Flutter DevTools to see the frame rate of the application, and the construction, layout and drawing time of each frame. We can also use Dart DevTools' CPU Profiler to see the CPU usage and the execution time of each function.
In addition, we also discovered during technical discussions that image caching, JSON serialization, deserialization, and extension tools can also be implemented.
In Flutter, you can use caching to improve the performance of your application. For example, we can use image cache (ImageCache) to cache images, so that we can avoid downloading images from the network every time. In addition, we can also use Memoization technology to cache the results of functions, so as to avoid repeated calculations.
Some operations, such as JSON serialization and deserialization, may affect application performance if performed directly with Dart's core libraries. Therefore, we can use specialized libraries such as json_serializable and built_value to perform these operations.
If we consider optimizing from the perspective of H5, I also strongly recommend using applets instead of H5, so that the applets developed in the past can be directly run in the applications developed by Flutter. The same functional business only needs one applet development. It also runs in other apps on the WeChat side. Due to the dual-thread technology, the effect is significantly better than that of H5, and the situation of white screen and freeze is greatly reduced. The principle is actually very simple. FinClip provides a small program SDK to integrate with Flutter applications, so that the App has a host environment that can run small program business codes.