Page fluency is no longer a mystery! Out of the box, Flutter FPS detection tool

Study the most avoid blind, no plan, fragmentary knowledge can not be strung into a system. Where did you learn, where did you forget? I can’t remember the interview. Here I have sorted out the most frequently asked questions in the interview and the core knowledge points in the Flutter framework. Welcome to pay attention and make progress together. ! [Flutter framework]

Welcome to the public account: Offensive Flutter or Runflutter, which collects the most detailed guide to advance and optimize Flutter. Follow me and get my latest articles ~

My lot: github.com/Nayuta403

Guide language:

The smoothness of a page is one of the most important metrics for any app. As a developer, optimizing page smoothness is also a reflection of your technical strength. But before we decide to optimize, there are two more important questions: 1. How do you find a stuck page? 2. How do I measure my optimization?

To solve these two problems, we have an interesting little tool called fps_monitor

A: What’s this?

This is an intuitive tool to help us assess page smoothness in profile/debug mode!! This is a gadget that allows you to view the performance of the most recent (default 100) frames on a device (refresh rate 60).

When we click ⏯ in the lower right corner, the button changes to ⏸, and the tool starts to collect the total time of each frame (including CPU and GPU time) for us. Clicking the ⏸ button at this point will show us the collected time consuming information

The top of the bar chart shows the collected data: maximum time, average time, and total time in milliseconds.

Below, I’ve broken down the page smoothness into four levels: smooth (blue), good (yellow), Slow (pink), slow (red), converting FPS to a frame, using different colors for each level, and counting the number of times each level occurs.

In the example above, we can see that the tool collected a total of 99 frames, the maximum frame took 119ms, the average time: 32.9ms, the total time: 3259.5ms. Among them, 40 frames are considered smooth, 25 good, 38 slight lag, and 6 lag.

A: Why do you need this?

1. Why didn’t I choose PerformanceOverLay and DoKit?

Some people may have some doubts about the above function. Why is your function so similar to PerformanceOverLay?

First, I had a problem with PerformanceOverLay:

In the figure, PerformanceOverLay shows us the build (UI) time and render (GPU) time respectively.

The first problem I have is because we tend to judge fluency by looking at the total time of a frame. After this split, the time of a frame becomes the sum of the top and bottom, which is not intuitive to me.

Secondly, it providesMost time consumingorThe average timeDoesn’t really help us quantify how smooth a page is. Because this statistical process simply averages the time of a frame, this presents a problem. We know that for a device with a refresh rate of 60, the minimum interval between two frames should be 16.7ms, but PerformanceOverLay collection process does not filter the data, so a frame time is less than 16.7ms, which may lead to low average data. (The average frame time in the figure below is 10.6ms 60HZ device)

In this way, DoKit is a good choice

However, DoKit also does not filter the minimum frame time, which can cause the average time to be low. At the same time, there is no more data to help evaluate the smoothness of the page.

The situation I encountered above is not necessarily a problem, but I feel in the process of using it is not very intuitive, not very convenient.

So this tool was developed, which has the following characteristics

You can also set the maximum number of frames to be collected

2. How do I understand page fluency

My ListView fluency doubled in the last issue!! The Flutter caton analysis and general optimization scheme are explained

For most people, at 60 frames per second, or 60FPS, the process is smooth.

At 60 frames per second, that means an average of 16.7ms between frames. Do you feel stuck when the time is longer than 16.7ms?

The answer, of course, is NO. Tencent also mentioned in Martrix

Most of the movies and videos we see are not very FPS, usually 25FPS to 30FPS, and we don’t actually feel stuck. In terms of human eye structure, when a set of actions changes 12 times in a second (i.e., 12FPS), we think that the set of actions is consistent

In fact, fluency itself is a very subjective thing, for example, some people think that king of glory does not open a high frame rate seems to be smooth, some people think that does not open a high frame rate is not a GIF.

Is there any objective index? After searching for a long time on the Internet, I found a paper Modeling the Impact of Frame Rate on perceptual quality of video published in ICIP in 2008. The experimental results are shown in the figure below

It can be seen from the figure that when the frame rate is greater than 15 frames, the subjective perception of human eyes is not different and basically at a high level. When the frame rate is less than 15 frames, the subjective perception of the human eye drops sharply. In other words, the human eye immediately perceives the incoherence of the picture.

Therefore, in the tool I unify data below 16.7ms into 16.7ms, so this detection tool only makes sense on devices with a refresh rate of 60. And the fluency is graded as follows:

  • Fluency: FPS greater than 55, meaning a frame takes less than 18ms
  • Good: FPS between 30-55, i.e. between 18ms-33ms per frame
  • Slight lag: FPS between 15 and 30, i.e. 33ms-67ms per frame
  • Caton: FPS less than 15, that is, a frame takes more than 66.7ms

And count the number of occurrences. Based on these data, you can compare the data before and after optimization and get the performance improvement. You can also set an ideal level of fluency. For example, smooth frames account for 90% of the frame count, or lag frames no more than 5 times.

How to use it?

1. Project dependency

Dependencies: fps_monitor: ^ 1.12.13-1

2. Access project

There are two access points

  • Specifies overLayState, because an Fps statistics page needs to pop up, so currently specifies overLayState.

(PS: Navigator.of(context) is used to jump to a page. GlobalKey is used to jump to a page without context.)

///Declare the NavigatorState GlobalKey
GlobalKey<NavigatorState> globalKey = GlobalKey();
///Get overLayState
  SchedulerBinding.instance.addPostFrameCallback((t) =>
    overlayState =globalKey.currentState.overlay
    );
///Specify the navigatorKey for the MaterialApp
navigatorKey: globalKey,

Copy the code
  • Wrap the component in the build property

builder: (ctx, child) =>
          CustomWidgetInspector(
            child: child,
          ),
Copy the code

3. How to use it

Once you’ve done that, all you need to do is launch the app, which will only be integrated in Profile/Debug mode, a ⏯ button will appear in your lower right corner, click to start recording, and click again to show data.

To end the collection, click stop listening in the panel.

If you want to capture more frames, you can set it to kFpsInfoMaxSize

4. Warning:

This project is currently under development based on the Flutter 1.12.13 branch. If you encounter compatibility problems with the access project, please leave a comment in the comments section or email me on our official account. Of course, you are welcome to direct PR~

How do you do it?

Maybe you will be interested in the detection principle of this tool, then let’s talk about two principles of Lao.

The acquisition of the plot data

 WidgetsBinding.instance.addTimingsCallback(monitor);
Copy the code

The Flutter will call back the time after each frame has been drawn. Time consuming is reflected in three variables: 1. Construction time; 2. Drawing time; 3. Total time. When you click the ⏯ button, the tool starts collecting information about the time spent.

In fact, the SchedulerBinding is recommended to check out the SchedulerBinding.

Display Fps interface

The page that displays the Fps is relatively simple and can be inserted directly through OverlayState. So if you’re not familiar with overlays you can think of them as floating Windows. The tables are drawn using custom brushes from DoKit, which can also be replaced with various open source chart libraries.

Thank you Daniel Wu and Eddie Peng for your likes,Start, and Follow

If you think this tool is good, click a “like” to support it

Very good data since the last article was published

It also gave me a brief experience of being # 1 on the author’s list (now no longer on QAQ)

Thanks for your support!! Synchronization with everybody, in order to ensure the quality of open source, don’t let everyone in use process difficult, yet BKListView in tests (last week and found a BUG ￣ – ￣ | | but has been fixed), according to the company after the completion of related processes for open source ~ I will continue to follow up, there is progress will update in the public and the Denver nuggets.

The whole development process obviously felt, the importance of reading source code, if there is no large amount of source code accumulation in the early stage, the whole design process will not have some such strange and strange ideas. So for the next phase, I will continue to share the source code with you with a direction plan, and hope that we can all progress together.