Shulou(Shulou.com)06/02 Report--

This article focuses on "what is the way to enhance the Flutter experience", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what is the way to improve the Flutter experience"!

target

Excessive frame loss will visually lead to stutters, which is reflected in the fact that the user's sliding operation is not smooth; page loading takes too long and it is easy to interrupt the operation flow; part of the exception of Flutter will cause the logic behind the exception code to fail to go, resulting in logical bug or even white screen. These questions can easily test users' patience and arouse their disgust.

Therefore, we develop the following three indicators as online Flutter performance stability criteria:

Page sliding fluency

Page loading time (first screen time + interactive time)

Exception rate

The ultimate goal is to let these metrics drive Flutter user experience upgrades.

Page sliding fluency

First of all, we have a general understanding of the screen rendering process: CPU first stores the information that can be recognized by the UI object transformation GPU into the displaylist list, and GPU executes drawing instructions to execute displaylist, take out the corresponding element information, rasterize rendering, and display it on the screen, such a circular process to achieve screen refresh.

The mixed technology solution of Native and Flutter adopted by Xianyu client, and the group high availability scheme is adopted for FPS monitoring of Native pages. Can this scheme be directly used for monitoring Flutter pages?

The common FPS detection solution on the Android side is that Choreographer.FrameCallBack,IOS uses a callback registered by CADisplayLink. The principle is similar. Each time a Vsync signal is sent and the CPU starts to calculate, the corresponding callback is executed, which means that the screen starts to refresh, and the number of screen renderings in a fixed time is calculated to get the fps. Only CPU stutters can be detected in this way, which cannot be monitored for GPU stutters. Because these two methods are detected in the main thread, and the screen drawing of Flutter is done in UI TaskRunner, and the real rendering operation is in GPU TaskRunner, for detailed Flutter thread issues, please refer to Xianyu's previous article: in-depth understanding of Flutter engine thread mode.

Here we conclude that the FPS detection method of Native is not suitable for Flutter.

Flutter officials have provided us with Performance Overlay as a frame rate detection tool, can we use it directly?

The above figure shows the frame rate statistics in Performance Overlay mode. You can see that Flutter calculates GPU and UI TaskRunner separately. UI Task Runner is used by Flutter Engine to execute Dart root isolate code, and GPU Task Runner is used to execute related calls to the device GPU. Through the analysis of the Flutter engine source code, UI frame time is the total time it took to execute _ window.onBeginFrame. GPU frame time is the time it takes to process the conversion of CPU commands to GPU commands and send them to GPU.

This method can only be enabled in debug and profile modes, and can not be used as an online version of fps statistics. But we can be inspired in this way to calculate the actual FPS by listening to the Flutter page refresh callback methods handleBeginFrame () and handleDrawFrame ().

0

Future main () async {

FlutterError.onError = (FlutterErrorDetails details) async {

Zone.current.handleUncaughtError (details.exception, details.stack)

}

RunZoned () async {

RunApp (new HomeApp ())

}, onError: (error, stackTrace) async {

Await _ reportError (error, stackTrace)

});

}

Among them, FlutterError.onError will only capture error and exception in the Flutter framework layer. It is officially recommended that this method be customized according to your own exception capture and reporting requirements. In practice, we encounter a lot of exception that will not have any impact on the user experience will be triggered frequently, this kind of exception with no improvement significance can add whitelist filtering and reporting.

02

Effect.

With online exception monitoring, hidden troubles can be detected early, problem stack information can be obtained, bug can be easily located, and overall stability can be prompted.

At this point, I believe you have a deeper understanding of "what is the way to enhance the Flutter experience". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.