[Android] CollectionViewwith multiple bindable layouts (CardWithComplexContent) performance issues

[eth-ellis]

Description

When migrating our app from Xamarin.Forms to .NET MAUI we noticed that for most of our CollectionViews the performance when scrolling was worse.

When new views appeared the CollectionView would stutter/jitter resulting in an unpleasant user experience.

Our item templates are somewhat complex but still worked great in Xamarin.Forms.

In the linked repro apps, we have a template called CardWithComplexContent which is somewhat similar to the template in our app.

Note

• In the .NET MAUI project we are using nightly build 8.0.20-nightly.10367
  • This includes [C] use ResourcesChanged to propagate Theme #21229
• We are using Release configuration when testing performance

Android (Samsung A73) - Xamarin.Forms

Android.-.Xamarin.mp4

Android (Samsung A73) - MAUI

Android.-.Maui.mp4

iOS (iPhone 6s) - Xamarin.Forms

iOS.-.Xamarin.mp4

iOS (iPhone 6s) - MAUI

iOS.-.Maui.mp4

Steps to Reproduce

1. Checkout .NET MAUI and Xamarin.Forms repro projects.
2. Build and deploy the apps to your devices in Release configuration.
3. Run both apps and select either the CardWithTheLot or CardWithComplexContent template.
4. Compare scrolling performance on both apps (fast scrolling and slow scrolling).

The apps contain other templates for attempting to isolate elements which impact performance the most.

Accepting PRs or suggestions on the repro app repos for templates to add for comparison.

Acceptance Criteria

The scrolling experience on .NET MAUI performs as well as or better than Xamarin.Forms for all affected platforms.

Link to public reproduction project repository

https://github.com/eth-ellis/Issue-Repro/tree/main/CollectionViewPerformanceXamarin and https://github.com/eth-ellis/Issue-Repro/tree/main/CollectionViewPerformanceMaui

Version with bug

Nightly / CI build (Please specify exact version)

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[Matt-17]

Unfortunately I must agree. I just put 100 same size labels in one collectionView and it's stuttering on my Pixel 5. In Forms this was totally fine. My workaround is now putting this in VerticalStackLayout and ScrollView as I don't need the other extras. I loads slower, but better than this scrolling experience.
Bonus points: put this CollectionView inside a CarouselView and you're crying.

[jonmdev]

Thank you for making this thread and providing such objective evidence. Your post clearly shows this is a Maui problem.

I have been struggling with this problem as well. I even built my own version of a "CollectionView" which performs similarly poorly. I have also created simple simulations of translation/update of elements to try to figure out the issue, all of which behave the same.

I have tried two methods of creating/simulating my own "CollectionView" type function in Maui:

1. Having 10-15 elements that each translate directly themselves together on screen and then wrap top to bottom to simulate scrolling. I posted a simple simulation of this nature here. The elements are derived from AbsoluteLayout and hold each only Border/Image/Label elements.

2. Having 10-15 similar elements on a large AbsoluteLayout as a base which translates (so I am not translating the elements themselves each frame but rather their big parent AbsoluteLayout) and then wrapping/updating the necessary elements only as they hit screen top or bottom.

In both cases the performance on Android has been identical to what you show in your videos. Even if I simplify the display elements so they are just a few labels on an AbsoluteLayout, Android struggles to update them effectively in Maui. I can't build release iOS versions to compare.

Given I can reproduce the same stuttery "scrolling" even with simple creations made of nothing more than AbsoluteLayout, Image, Label, and Border with very simple updates, I suspect the problem is more generalized in Maui than the CollectionView.

I suspect it has something to do with Maui invalidating the platform views in a way that is making them redraw the screen too many times when even simple updates occur. There is clearly way too much effort going on. Translations should be extremely cheap to adjust and Label text updates should also be very simple. Yet they are not. Simple things like this cause the apps to grind down. Watching the Android Studio profiler when I load a test APK, I can see it is doing too much work each update but don't know why.

Hopefully your evidence will help lead to the cause and solution.

[Zhanglirong-Winnie]

Verified this issue with Visual Studio 17.10.0 Preview 2(8.0.14 & 8.0.0-rc.2.9530). Can repro on android and iOS platforms with sample project.

[bcaceiro]

I am converting all my collectionviews for BindableLayouts ( since I don't have that many elements) and the performance gains are huge.

On other note, one thing I noticed: Without interacting with the collectionview, the Garbage Collector is crying, spamming multiple GCs - which is kinda strange? (after loading the CV)