Learning Process : Performance and Optimization

[omarokasha1]

Kareem, I need you to investigate this and give me Document it what you learn in here

https://docs.flutter.dev/perf

[omarokasha1]

@kareemahmed22 any Updates ?

[Ka8eemHelmy]

Performance

• We Talk Here About :

  • Speed.

  • Memory.

  • App Size.

  • DevTools.

• Speed General advice

  • If you are seeing janky (non smooth) animations, make sure that you are profiling performance with an app built in profile mode not in debug mode.

    • In Android Studio and IntelliJ, use the Run > Flutter Run main.dart in Profile Mode menu item.

  • Connect to a physical device Not the Emulator.

    • Why you should run on a real device:

      • Simulators and emulators don’t use the same hardware, so their performance characteristics are different.

      • Debug mode enables additional checks (such as asserts) that don’t run in profile or release builds.

      • The debug build compiles the Dart code “just in time” (JIT) as the app runs, but profile and release builds are pre-compiled to native instructions (also called “ahead of time”, or AOT) before the app is loaded onto the device. JIT can cause the app to pause for JIT compilation, which itself can cause jank.

  • Rebuilding far more of the UI than expected each frame. To track widget rebuilds.

  • Building a large list of children directly, rather than using a ListView.

  • Avoid overly large single Widgets with a large build() function, Split them into different Widgets.

  • Apply Effects Only when Needed like Opacity and Color Fillters.

  • Some of them invoke saveLayer() behind the scenes, which can be an expensive operation.

    • Why is savelayer expensive?

    • Calling saveLayer() allocates an offscreen buffer. Drawing content into the offscreen buffer might trigger render target switches that are particularly slow in older GPUs.

  • Use the Opacity widget only when necessary and we can use FadeInImage Widget or use AnimatedOpacity Widget insted of Opacity.

  • Clipping doesn’t call saveLayer() (unless explicitly requested with Clip.antiAliasWithSaveLayer) so these operations aren’t as expensive as Opacity, but clipping is still costly.

  • Avoid clipping in an animation. If possible, pre-clip the image before animating it.

  • Avoid pass a long Lists into Constructors.

• Memory

  • Using memory wisely.

• App Size

  • By default, launching your app with flutter run, or by clicking the Play button in your IDE, generates a debug build of the Flutter app. The app size of a debug build is large due to the debugging overhead that allows for hot reload and source-level debugging.

  • Checking the total size:

    • We should Run in the Terminal

flutter build apk

or

flutter build ios

• Estimating total size:

  • Android:

    • Follow the Google Play Console’s instructions for checking app download and install sizes.

    • Produce an upload package for your

flutter build appbundle

• Log into your Google Play Console. Upload your application binary by drag dropping the .aab file.

• Finally View the application’s download and install size in the Android vitals -> App size tab.

• NOTE: download sizes may vary depending on their hardware.

• Breaking down the size:

  • The size analysis tool is invoked by passing the --analyze-size flag when building:

    flutter build apk --analyze-size
    flutter build appbundle --analyze-size
    flutter build ios --analyze-size
    flutter build linux --analyze-size
    flutter build macos --analyze-size
    flutter build windows --analyze-size

• Some other things you can do to make your app smaller are:

  • Remove unused resources.

  • Minimize resource imported from libraries.

  • Compress PNG and JPEG files.

• DevTools

• What is DevTools?

  • DevTools is a suite of performance and debugging tools for Dart and Flutter.

• What can I do with DevTools?

  • Inspect the UI layout and state of a Flutter app.

  • Diagnose UI jank performance issues in a Flutter app.

  • CPU profiling for a Flutter or Dart app.

  • Network profiling for a Flutter app.

  • Debug memory issues in a Flutter or Dart command-line app.

  • Analyze code and app size.

• How do I install DevTools?

  • See the Android Studio/IntelliJ, VS Code, or command line pages for installation instructions.

• Flutter frames chart :

• UI :

  • The UI thread executes Dart code in the Dart VM, When your app creates and displays a scene, the UI thread creates a layer tree, a lightweight object, and sends the layer tree to the raster thread (known as the GPU) to be rendered on the device.

• Raster (known as the GPU thread) :

  • This thread takes the layer tree from UI and displays it by talking to the GPU (graphic processing unit), You cannot directly access the raster thread or its data, but if this thread is slow, it’s a result of something you’ve done in the Dart code.

• Jank :

  • The frame rendering chart shows jank with a red overlay. A frame is considered to be janky if it takes more than ~16 ms to complete (for 60 FPS devices).