2022 Flutter Performance performance debugging tool devTools

foreword

Before the Flutter Release is released, performance testing is definitely needed. Today we will discuss it together. This topic can be discussed in depth.

Objectives of this section

• Use of debugging tools

  • Performance
  • CPU Profiler
  • Memory
  • Package Size
  • Inspector Widget stroke
• Some suggestions for performance optimization

video

https://www.bilibili.com/video/BV1Tb4y1p7t9/

refer to

• Flutter performance analysis
  https://flutter.cn/docs/perf/rendering/ui-performance
• Using the Performance view
  https://flutter.cn/docs/development/tools/devtools/performance
• Using the app size tool
  https://docs.flutter.dev/development/tools/devtools/app-size#generating-size-files

text

devTools performance open method

Debugging must be real!

• vscode

"flutterMode": "profile" This option turns on

Command mode open open devTools

Choose to open in browser

• android studio / intellij

One key to enter profile mode, very simple

Click Open devTools to go directly to the browser

performance cpu troubleshooting

• add test code

  void imBusy() {
    for (var i = 0; i < 9999999; i++) {}
  }

  @override
  Widget build(BuildContext context) {
    imBusy();
    ...

• view

UI is generally cpu
Raster can be understood as gpu
The reddish color is time consuming
The bottom line of the Timeline is your code stack

For the convenience of checking and checking these three items, the rest is your own function
Cpu Profile > Cpu Flame Chart icon to view specific functions

CPU Profiler troubleshooting

You need to click Record, then you operate the interface, remember to Stop

The system is also filtered here, and all three are checked.

64% is spent on the imBusy function, there is nothing to say, and it also tells you the location of the file

Memory view

We prepare 2 big pictures to load

  Widget _buildBigAssetsPicture() {
    return Image.asset("assets/cafe.jpg");
  }

  Widget _buildBigAssetsPicture2() {
    return Image.asset("assets/love.jpg");
  }

  ...

    body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        // 载入大图
        _buildBigAssetsPicture(),
        _buildBigAssetsPicture2(),

        ...

Raster is very time-consuming, and the performance panel is friendly to remind you that this is a mistake

After clicking Performance Overlay, two icons will appear on the app interface
The Raster above is the gpu
The UI below is your cpu
It can be found that after I load two pictures, the average time is 71 ms / frame, which is too time-consuming.
The cpu can also average 2.1 ms/frame

Memory Analysis

Open the Android Memory option, you can see more details
It can be found that the Graphics occupancy is high
Note that this Events tells you which resource is specific, you can refer to it

Package file size analysis

• Generate snapshot.arm64-v8a.json file

> flutter build apk --analyze-size --target-platform=android-arm64

• Analysis checklist

app-release.apk (total compressed)                                          9 MB
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  res/
    mipmap-xxxhdpi-v4                                                       1 KB
  META-INF/
    MANIFEST.MF                                                             2 KB
    kotlinx-coroutines-core.kotlin_module                                   1 KB
    CERT.SF                                                                 3 KB
    kotlin-stdlib.kotlin_module                                             3 KB
    CERT.RSA                                                              1013 B
  lib/
    arm64-v8a                                                               5 MB
    Dart AOT symbols accounted decompressed size                            3 MB
      package:flutter                                                       1 MB
      dart:core                                                           234 KB
      dart:typed_data                                                     193 KB
      dart:ui                                                             170 KB
      dart:collection                                                     117 KB
      dart:async                                                           76 KB
      dart:convert                                                         50 KB
      dart:io                                                              40 KB
      dart:isolate                                                         29 KB
      package:vector_math/
        vector_math_64.dart                                                23 KB
      dart:ffi                                                             11 KB
      dart:developer                                                        8 KB
      package:typed_data/
        src/
          typed_buffer.dart                                                 5 KB
      package:flutter_application_performance/
        main.dart                                                           2 KB
      package:collection/
        src/
          priority_queue.dart                                               2 KB
      dart:vmservice_io                                                    635 B
      dart:mirrors                                                         492 B
      dart:math                                                            475 B
      dart:nativewrappers                                                  186 B
      void/
        <optimized out>                                                     44 B
  assets/
    flutter_assets                                                          3 MB
  kotlin/
    reflect                                                                 1 KB
    collections                                                             1 KB
    kotlin.kotlin_builtins                                                  4 KB
  resources.arsc                                                           24 KB
  AndroidManifest.xml                                                       1 KB
  classes.dex                                                             250 KB
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
A summary of your APK analysis can be found at: /Users/ducafecat/.flutter-devtools/apk-code-size-analysis_02.json

Analysis result file /Users/ducafecat/.flutter-devtools/apk-code-size-analysis_02.json
flutter_assets 3 MB , it can be found that this resource file is a bit large and needs to be optimized
arm64-v8a 5 MB core must
Dart AOT symbols accounted decompressed size 3 MB core must

• Upload snapshot.arm64-v8a.json file

File Location build/flutter_size_04/snapshot.arm64-v8a.json

After clicking the analysis file, you can see such an icon, which is very intuitive

Widget Inspector enables stroke function

If a widget is repeatedly redrawn, the stroke is deepened

It can be seen that these two pictures are purple.
You can use partial refresh trick to optimize GlobalKey status subscription

Summarize

Through the above two examples, let everyone know how to check the performance of cpu gpu and analyze the size of package files.

Some suggestions in development:

• There are many reasons that affect performance analysis. For example, your mobile phone itself is very stuck and the memory is very small.
• Repeated testing in suspicious places
• If you feel stuck, you can use the elimination method to gradually find the reason
• Don't do time-consuming calculations during build time
• Resources should be thin and optimized, size and size
• When troubleshooting, it is necessary to distinguish the problem of cpu gpu
• Layout optimization uses keys to speed up performance
• Memory optimized const instantiation, now ide has hints
• High latency can be viewed on the network

end

---

© Cat Brother

• WeChat ducafecat
• Blog ducafecat.tech
• github
• bilibili