Flutterexperts

Flutter promises a fast and smooth app but smoothness is the key to any app when we talk about any app’s performance however speed is also like the icing on the cake but as we all know when both characteristics add up a complete and useful app lands on the ground so here we are going to discuss how to observe and rectify both key factors.

---

Impact of Performance profiling

profiling of performance helps us out to make a better rich user experience app however any app’s performance does not only depend on a single issue but on raw speed, UI smoothness, fewer janks. It also depends on I/O and network but here we are discussing the efforts that can be made during the development phase. So Profiling helps us out to mark problems while developing and sort them out at the same time.

Use Physical Device and run on Profile or release mode

When you are going to observe how your app is reacting when you use it you need to run it on the physical device and your mode should be profile mode because the emulator is not able to give the same performance as any physical device gives.

Advantages of running app on a physical device:

• In Debug mode dart code is compiled “just in time” as the app runs and because of this, it causes JIT compilation jank itself so it slows the app while in profile or release mode code is compiled “Ahead of Time” which means the builds are pre-compiled before they are loaded in the device.
• Debug mode enables the additional checks which do not happen in the profile or release mode.
• Simulator or emulator does not use the hardware as the physical device uses so sometimes emulator works fast while sometimes slow that may cause dilemma as compare to physical devices.

Devtools A necessity

Devtools is a kind of tool that helps to x-rays your whole app on different aspects such as it helps to study code step by step means debugging, memory allocation like to observe app’s heap, enabling the performance overlay and also allows you to investigate the UI performance of your frame by frame.

its timeline view makes developer enable to keenly observe the app’s timing and performance information basically it consists of three parts

• Flutter frame chart
• timeline events chart
• CPU profiler

Identifying through Performance Overlay

Performance overlay like ECG of a body where you can check every single frame top graph is showing the raster thread and bottom graph showing UI thread. it shows how much time has been spent in each frame if the UI is janky and here you can the reason behind the time spent.

Investigating through Graphs

When you are interpreting the information from the graphs you must understand how it is responding, almost top and bottom graphs show the time spent and frames but are of working is different, white lines across the graph show 16ms increment, and if the graph is going over the horizontal lines you running at less than 60Hz. it only updates when your application paints mean you are working or operating unless it stops moving.
Results can be misleading if you are testing the app in debug mode so its better to run on profile mode.

The time required related to passing any frame and how it works and what required to maintain in any flutter app in my blog Improve Rendering performance in Flutter. You can read it.

Understanding through Threads

Working of the flutter depends on different threads and two threads can be observed through the overlay. The first one is the Raster thread and the second one is the UI thread besides these two you don’t get access to any thread but your actions on the UI thread can cause good or bad impacts on other threads. Working of threads is important to understand so let’s have a small look at these threads.

Raster Thread

Raster thread holds Skia and graphic libraries to run it also consists of layer tree and displays it in communication with the graphic processing unit. basically, it runs on the CPU, not on the GPU unit however it is not directly accessible but if it lacks in performance it means there is something appropriate in your dart code.

UI Thread:

In this thread Basically, Dart Virtual Machine is used to execute the Dart Code, your written code is executed by Flutter’s Framework on the app’s behalf. A layer tree is created, a lightweight object containing device-agnostic painting commands, and then it sends the layer tree to the raster thread to be rendered on the device.

Platform thread

This thread can not be seen in performance overlay however this platform’s main thread and is responsible to run Plugin code here.

I/O thread

This thread performs important tasks mainly related to I/O and it blocks either The UI or the raster threads. it also can not be seen in performance overlay.

There are different ways to see the performance overlay and these are

• Using the Flutter Inspector
• From Command line
• Programatically

Using the Flutter inspector it is easy to operate with an overlay widget from the Flutter inspector just simply click the button to operate with it. From the command line is can be used by using the P key, it can also be used programmatically.

Identifying Problems in the GPU graph

some times problems can be caused in rendering in the raster thread however layer tree can easily be constructed and when it happens the GPU graph shows the redline but the UI graph does not. In this case, we need to figure out what causing the code’s functioning slower than expected if you figure out you will find out that it is expensive to run on GPU because some of them calling saveLayer.

If you suspect that the source of the slowness is during an animation, click the Slow Animations button in the Flutter inspector to slow animations down by 5x. If you want more control on the speed, you can also do this programmatically.

SaveLayer method is an expensive method in the Flutter framework you should avoid using it if it is not necessary. If it is not called explicitly but it can be called implicitly so always check when your scene is using saveLayer with the PerformanceOverlayLayer.checkerboardOffscreenLayers switch.

Rendering texture using an image file can be costly because at first the compressed image is fetched from persistent storage then it is decompressed into host memory(GPU memory) and then transferred to the device memory. So it becomes costly when I/O thread works. You can see which images are being cached by enabling the PerformanceOverlayLayer.checkerboardRasterCacheImages switch.

Conclusion

So these are the few techniques by which an App can be profiled, Profiling an app gives you an idea where the app is lacking performance vise. Rendering and painting scenes can easily be maintained while the app is working so these steps are to make the app’s performance and function rich.

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙

If this article has helped you a bit and found interesting please clap!👏

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.