Android platform view performance issues

[jjliu15]

This issue comes from the GMA plugin: https://github.com/googleads/googleads-mobile-flutter.

There is noticeable lag when webviews displayed using hybrid composition are placed in a scrolling view. The performance is significantly worse on android api < 10 and lower end devices, but it has been seen on higher API levels as well.

The GMA plugin uses hybrid composition on Android. Virtual display is not a viable workaround.

Reproduction details can be found in the original issue: googleads/googleads-mobile-flutter#269

[rocketman7]

Seriously, it's not about Android. In iOS, the performance drops significantly as well when Native Ads or Banner Ads are frequently included in a scrollable list. This have been said on the original thread so many times already but @jjliu15 , you excluded all these reports. Again, it's not about Android.

[svprdga]

Here is a graphical way to see the issue. This test was done with a Galaxy A3 from 2017.

I have tried to reproduce the problem with an iPhone SE from 2020 but the performance is OK as expected, @rocketman7 can you provide a graphical comparison using the performance graph with the issue you are experiencing in an iOS device?

PD: The linked project is a reproducible sample of the issue, just remember to add your account ID and the ad unit id in main.dart.

[rocketman7]

Here is a graphical way to see the issue. This test was done with a Galaxy A3 from 2017.

I have tried to reproduce the problem with an iPhone SE from 2020 but the performance is OK as expected, @rocketman7 can you provide a graphical comparison using the performance graph with the issue you are experiencing in an iOS device?

PD: The linked project is a reproducible sample of the issue, just remember to add your account ID and the ad unit id in main.dart.

Okay, I will try to make a graphical comparison. However, what I thought it was the problem was not like you reproduced. It's like Native/Banner Ads are shown every 5 container of list. Your code place only one ad at the bottom of the screen. But what i said was like as below:

Ad no.1
Container
Container
Container
Container
Container
Ad no.2
Container
Container
Container
.. and so on and it's all in a scrollable list.

attached code snippet. * CommunityAd() is a widget of NativeAd.
This list is in scrollable widget, let's say SingleChildScrollView.

ListView.builder(
          shrinkWrap: true,
          itemCount: 50,
          itemBuilder: (_, index) {
            return Column(
              children: [
                ((index + 1) % 5 == 2) ? CommunityAd() : Container(),
                FeedWidget(),
              ],
            );
          }),

[radomir9720]

@rocketman7 Hi. This is from ListView's docstring:

  /// Shrink wrapping the content of the scroll view is significantly more
  /// expensive than expanding to the maximum allowed size because the content
  /// can expand and contract during scrolling, which means the size of the
  /// scroll view needs to be recomputed whenever the scroll position changes.

I don't know for sure if the shrinkWrap is the culprit of your performance issues, but better to avoid using shrinkWrap. Maybe you will try to, for example, remove shrinkWrap and instead wrap the ListView in an Expanded widget? Maybe you will see some difference in performance...

[mkassan]

Hello,
Please refer to this Link to reproduce the issue.
Thank you in advance
Best regards

[maheshmnj]

Thanks for the code sample @mkassan,

I verified this issue on the latest master channel. There is a severe lag when scrolling also the ads flicker sometimes. I have attached the timeline trace if it can help, The sample app was run in profile mode with --trace-skia

flutter run --profile --trace-skia

dart-timeline-trace against the native ads sample

banners_ads_example.zip

nativead_example.zip

flutter doctor -v

[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.8.1 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (5 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 60.1.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.63.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.32.0

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:5555                     • android-arm64  • Android 11 (API 30)
    • iPhone 12 (mobile)     • 19EA5268-C931-4C3A-ACC6-71D3E849C450 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 97.0.4692.71

• No issues found!

[✓] Flutter (Channel master, 2.9.0-1.0.pre.398, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.9.0-1.0.pre.398 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8017883a5d (3 hours ago), 2022-01-18 23:04:01 -0500
    • Engine revision 7a33b4b3fb
    • Dart version 2.17.0 (build 2.17.0-27.0.dev)
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 60.1.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.63.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.32.0

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:5555                     • android-arm64  • Android 11 (API 30)
    • iPhone 12 (mobile)     • 19EA5268-C931-4C3A-ACC6-71D3E849C450 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 97.0.4692.71

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[blasten]

flutter/engine#31468 landed. This PR implements the majority of the improvements. However, I'm debugging an issue #98722 caused by this change.

[naamapps]

Thanks for your dedication @blasten.
Are there plans to improve ios native views as well?

[blasten]

Hey everyone,

I've been working on improvement perf of Android native views.

Please try the latest changes, and share any findings:

Steps

1. Switch to Flutter master channel

flutter channel master
flutter upgrade

2. Download the changes required for google_mobile_ads

git clone -b tx --single-branch https://github.com/googleads/googleads-mobile-flutter.git

3. Point the google_mobile_ads package to the location where you cloned the plugin

  google_mobile_ads:
    path: <path>/googleads-mobile-flutter/packages/google_mobile_ads

4. Rebuild the app with any flutter command.

[medst]

performance get worse than before

• Skipped 56 frames! The application may be doing too much work on its main thread.
• ads not work correctly(banner - native - inter).
• app became very slow.

device-2022-03-05-161427.mp4

flutter doctor

---

[✓] Flutter (Channel master, 2.11.0-0.0.pre.784, on Microsoft Windows [Version 10.0.22000.527], locale en-US)
• Flutter version 2.11.0-0.0.pre.784 at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ca9ecbc (13 hours ago), 2022-03-04 22:26:13 -0500
• Engine revision 7b49058
• Dart version 2.17.0 (build 2.17.0-176.0.dev)
• DevTools version 2.11.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at C:\Users\Gebruiker\AppData\Local\Android\sdk
• Platform android-31, build-tools 30.0.3
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)
• All Android licenses accepted.

[✓] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.0)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.1.32210.238
• Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2021.1)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)

[✓] VS Code (version 1.64.2)
• VS Code at C:\Users\Gebruiker\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.27.0

[✓] Connected device (4 available)
• SM G965F (mobile) • 228c621409027ece • android-arm64 • Android 10 (API 29)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22000.527]
• Chrome (web) • chrome • web-javascript • Google Chrome 99.0.4844.51
• Edge (web) • edge • web-javascript • Microsoft Edge 98.0.1108.62

[✓] HTTP Host Availability
• All required HTTP hosts are available

• No issues found!

[b3nni97]

That means there is currently no way to use a Flutter app with ads without the app becoming completely unusable?

At least on Android they are already trying to get a fix for the problem, as I understand it there is not even an idea for iOS how the problem could possibly be solved in the future.

Especially for many small companies that use Flutter, ads are the only way to finance an app. I find this quite disappointing, because not every app can stay financially viable with in-app purchases or subscriptions.

[blasten]

@medst if you can share the APK with us, that'd be helpful.
Build in profile mode, and send to flutter-android@google.com

[medst]

@blasten ./Done

[CarGuo]

@blasten hello , I testing in this.

when I test in master ，I can saw PlatformViewWrapper in Layout InSpector ，but x & y = 0 like below

I could find top 、left args in Java code , but I'm not found any API in dart , So I think maybe I missed some configurations , , is the result normal like this?

[blasten]

@CarGuo Yes, some framework changes are required to set the offset.
This is handled in #97628

However, the offset doesn't affect how Flutter paints the platform view texture.

[blasten]

@medst you might be running into a different issue.

As far as this issue is concerned, it should improve the performance issue: googleads/googleads-mobile-flutter#519 (comment)

[blasten]

This issue was fixed by #100091.

Other than googleads/googleads-mobile-flutter#532, no more changes are required in the googleads plugin.

[b3nni97]

Hi @blasten ,

do you have plans to improve the performance for iOS as well?

Is there a separate issue for iOS because of the performance problems?

[eggfly]

As I know, the second step for us is to make it work without thread merging in Android? Only make this step done, we will get a better performance, is that right? @blasten
It also need include making the native view related calling to run on platform thread.
And are you doing this stuff? We have some apps also need the improvement for the platform view, especially in the case of Flutter widgets above the platform view in z-order and the overlay FlutterImageView is created.

[blasten]

As I know, the second step for us is to make it work without thread merging in Android?

@eggfly there's no more thread merging after the latest changes. Both hybrid composition and AndroidView render platform views using the same code path, and it doesn't use thread merging.

do you have plans to improve the performance for iOS as well?

@cyanglaz would know about it.

[medst]

@medst you might be running into a different issue.

As far as this issue is concerned, it should improve the performance issue: googleads/googleads-mobile-flutter#519 (comment)

HI @blasten , the performance is improved very well. nice work 🔥

[eggfly]

Another thing, I noticed that Flutter supports API 19 or above: https://docs.flutter.dev/development/tools/sdk/release-notes/supported-platforms
But after this change: flutter/engine#31198
PlatformViews only support 23 above, is that right? @blasten

[CarGuo]

Another thing, I noticed that Flutter supports API 19 or above: https://docs.flutter.dev/development/tools/sdk/release-notes/supported-platforms
But after this change: flutter/engine#31198
PlatformViews only support 23 above, is that right? @blasten

I Think Hybrid Composition still support API 19.
This change VirtualDisplay mode

[cyanglaz]

Thanks for your dedication @blasten. Are there plans to improve ios native views as well?

Thank you for bringing up the concern about iOS performance with multiple PlatformViews. As of now, it is not actively worked on as iOS doesn't have a way to display PlatformView content with a texture in a different thread like how it was done on Android.

[naamapps]

Thanks for the reply @cyanglaz, I hope you and the team will be able to find a way to improve ios views too.
I think this all native views subject is really important for flutter and unfortunately it is overlooked for other things.

[blasten]

PlatformViews only support 23 above, is that right?

@eggfly - Yes. After this change, if you use platform views you have two options:

1. Bump minSdkVersion to 23 in build.gradle.
2. Detect the API level version yourself and have fallback for < 23.
   e.g. If you are embedding a webview, consider opening the URL with the Chrome app or stock browser.

[b3nni97]

@cyanglaz Is there an issue that can be tracked for iOS?

The current status is that Google Ads are not suitable for Flutter on iOS. I think this should at least be noted in google_mobile_ads that this package cannot be recommended for iOS.

[AlexV525]

Bump minSdkVersion to 23 in build.gradle.

Is this really necessary? Can flutter_tools make detections during the compile process? Although this change does not match our breaking change policy, I'd still consider it as one. Flutter nowaday supports from 16 by default, yet has limits everywhere.

(Sorry for the accidently reopen)

[eggfly]

PlatformViews only support 23 above, is that right?

@eggfly - Yes. After this change, if you use platform views you have two options:

1. Bump minSdkVersion to 23 in build.gradle.
2. Detect the API level version yourself and have fallback for < 23.
   e.g. If you are embedding a webview, consider opening the URL with the Chrome app or stock browser.

@blasten What if we replace lockHardwareCanvas() to lockCanvas() only when current device is below Android API 23?
https://developer.android.com/reference/android/view/Surface#lockCanvas(android.graphics.Rect)

[blasten]

lockCanvas() performs poorly as it makes CPU copies. It makes apps very slow. You can try it yourself with a local engine if you are interested.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.