The content of this article is mainly combined with another article of mine, Flutter Development App Optimization Journey , which is a synchronous supplementary article, for the reference and encouragement of all siege lions.
1. Flutter Inspector (in debug mode)
Flutter Inspector has many functions, two of which are more worthy of our attention, such as "Select Widget Mode" and "Highlight Repaints".
Select Widget Mode Click the "Select Widget Mode" icon to view the layout frame and container type of the current page on the mobile phone.
Through "Select Widget Mode", we can quickly check the layout implementation of unfamiliar pages. And the location of the corresponding code in the project.
In Select Widget Mode mode, you can also click the corresponding layout control in the app to view
Highlight Repaints
Click on the "Highlight Repaints" icon and it will draw an outline around all the RenderBoxes and change color as they repaint.
Doing this will help you find the part of your app where frequent redraws cause excessive performance consumption.
For example: a small animation may cause the entire page to be redrawn. At this time, use RepaintBoundary Widget to wrap it, which can reduce the redrawing range to the area occupied by itself, so as to reduce drawing consumption.
2. Performance Overlay (performance layer)
After completing the application startup, we can use the rendering problem analysis tool provided by Flutter, that is, the performance overlay (Performance Overlay), to analyze the rendering problem.
We can turn on the performance layer in the following way
The performance layer will be on the top layer of the current application, displaying the execution charts of the GPU and UI threads in a self-drawn manner by the Flutter engine, and each of these charts represents the performance of the current thread in the last 300 frames. If the UI freezes, These charts can help us analyze and find the cause.
The following figure demonstrates how performance layers are presented. Among them, the performance of the GPU thread is on the top, and the situation of the UI thread is displayed on the bottom. The blue vertical line represents the normal frame that has been executed, and the green line represents the current frame:
If a frame takes too long to process, it will cause the interface to freeze, and a red vertical bar will be displayed in the graph. The following figure demonstrates the display style of the performance layer when the application takes time to render and draw:
If the red vertical bar appears on the GPU thread chart, it means that the rendered graphics are too complex to render quickly; and if it appears on the UI thread chart, it means that the Dart code consumes a lot of resources and needs to optimize the code execution time.
3. CPU Profiler (UI thread problem location)
When the view is built, some complex operations are used in the build method, or synchronous I/O operations are performed in the main Isolate.
We can use CPU Profiler to detect:
You need to manually click the "Record" button to trigger it actively. After completing the sampling and collection of information, click the "Stop" button to end the recording. At this point, you can get the execution status of the application during this period.
in:
X-axis: Indicates the unit time. The wider the width of a function on the x-axis, the more times it is sampled, that is, the longer the execution time.
y-axis: Represents the call stack, each layer of which is a function. The deeper the call stack, the higher the flame, with the executing function at the bottom and its parent function at the top.
Through the above CPU frame diagram, we can roughly analyze which methods have time-consuming operations, and optimize them accordingly
For general time-consuming problems, we can usually use Isolate (or compute) to move these time-consuming operations outside the concurrent main Isolate to complete.
For example: sub-threading complex JSON parsing
Flutter's isolate is a single-threaded model by default, and all UI operations are performed on the UI thread. If you want to take advantage of multi-threaded concurrency, you need to create a new isolate or compute. In any case, await and scheduleTask only delay the invocation timing of the task and still occupy the "UI thread". Therefore, when parsing large Json or calling a large number of channels, you must observe the consumption of the UI thread.
4. Highlight Oversized Images detects pictures that consume excess memory
Flutter Inspector: Click on "Highlight Oversized Images", it will identify those images whose decoding size exceeds the display size, and the system will invert them, so you can find it more easily in the App page.
The detection effect of using "Highlight Oversized Images" can be clearly seen from the following two pictures
For these pictures, you can specify cacheWidth and cacheHeight as the display size, which allows the flutter engine to parse the pictures with the specified size and reduce memory consumption.
Note: ResizeImage does not yet support gif ResizeImage cannot resize gif · Issue #90804 · flutter/flutter · GitHub
