CollectionView - slow scrolling, laggy performance

[Kalyxt]

Description

I have CollectionView with 200 items with 2 labels in each item, but scrolling performance is unacceptable.

Device - Lenovo TAB M10 FHD Plus 4GB – 128 GB Iron

With better hardware its slightly better, but not everyone has last gen CPU especially in devices with build-in barcode scanner.

recording_20220614_103041.mp4

recording_20220614_102654.mp4

@jonathanpeppers

Steps to Reproduce

Sample project
https://github.com/Kalyxt/Test_CollectionView.git

Version with bug

6.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

All versions of android

Did you find any workaround?

Latest gen CPU

Relevant log output

No response

[Kalyxt]

recording_20220614_113542.mp4

[angelru]

I had the same problem in a Xamarin Forms app and these tips helped me get better performance:
https://codetraveler.io/2020/07/12/improving-collectionview-scrolling/

Maybe you can try https://github.com/roubachof/Sharpnado.CollectionView

I know the MAUI team is doing a great job, but I think the CollectionView should have a higher priority for bug fixes.

[jonathanpeppers]

I enabled the framerate under the developer options, upped to 10,000 rows, but I still get a good framerate with a Pixel 5:

It sometimes says 90, but this was using a Release build. @Kalyxt are your examples above using Release mode?

I'll get dotnet trace and see if there are any easy wins, thanks!

[Kalyxt]

It is indeed noticeably better with Release mode. However we are talking about two labels in list and low performance devices compared to Pixel 5 or other android flagships. Its still laggy while fast scrolling. What will happen in more complex scenarios with image or labels with spans?

Buidld-in scanner PDA - Not great not terrible

recording_20220614_035847.mp4

Lenovo TAB M10 FHD Plus 4GB - Laggy

recording_20220614_040357.mp4

Redmi Note 9 - Quite good

recording_20220614_042117.mp4

I enabled the framerate under the developer options, upped to 10,000 rows, but I still get a good framerate with a Pixel 5:

It sometimes says 90, but this was using a Release build. @Kalyxt are your examples above using Release mode?

I'll get dotnet trace and see if there are any easy wins, thanks!

[KazysNoobiys]

CollectionView is a key element in any application. The fact that even with the release of MAUI CollectionView still works badly literally forces us to discard MAUI in favor of Flutter.

[jonathanpeppers]

@Kalyxt are you able to get the FPS on the screen for the slower devices?

For hot reload support, MAUI apps use the intepreter by default in Debug mode. When testing performance, make sure to always test a Release build.

[Kalyxt]

I couldn't find it under developer options on these devices so I downloaded FPS counter. It shows 60 FPS while scrolling even when it isn't smooth.

We could go to more complex lists with images and more elements in each item and it will definitely be much worse. What is really bottleneck here, when I can scroll in settings like this:

recording_20220615_091319.mp4

And this is our sample on the same device:

recording_20220615_090354.mp4

[Laftek]

Sorry for OT but is there anyone who tried to use MAUI Blazor with grid (additionaly with virtualization) to see what is performance comparing to ColletionView? Thanks.

[Awesomer9561]

Hi, any update on this?

[jonathanpeppers]

So these all would help this issue:

• [essentials] use Lazy<T> for Android application-wide values #7996
• [android] avoid View.Context where unecessary #8001
• [core] use Lazy<T> for MauiContext properties #8033
• [android] reduce JNI calls during layout measurement #8034

These all improve the general performance of putting views on the screen.

The problem with this issue, is I don't think we have an accurate way to actual measure the problem here or at what point it will be fixed. How much faster does it need to be, to be "fixed"?

I've heard the latest "dolphin" release of Android Studio has a profiler that can detect "jank" while scrolling. I need to use that and see if that shows anything. I just haven't gotten to it yet.

[Kalyxt]

How much faster does it need to be, to be "fixed"?
It needs to scroll at least as fast as scrolling in android menus/settings.

First of all you should get few low end devices (for example - Lenovo TAB M10 FHD Plus - 180€), to be able to experience it. Pixel 5 or even budget phones from Xiaomi is not suitable for this.

[jonathanpeppers]

@Kalyxt have you tried dotnet/maui builds from main? Just to see if they are any better on your device?

I think the tradeoff here is the market share of these low-end devices, and is the goal for MAUI to run 100% perfect on them? If we wait some period of time, does the usage of these slower devices go away?

I'm not person to make the decision if that is a goal for MAUI -- but I definitely want to improve performance where we can. Thanks!

[Kalyxt]

Its about performance, you just doesn't see it on powerful device. Why does android menu feel smooth and MAUI list with two labels not ?

If its not optimized right, you might see smooth scrolling on flagship, but it takes more resources than it should. Is this right ?

Btw, I tried @jfversluis CollectionView with monkeys and its running pretty good even on Lenovo TAB.

recording_20220621_071451.mp4

[jonathanpeppers]

I tried the sample above, with 10,000 rows in Android Studio Dolphin, following:

https://developer.android.com/studio/profile/jank-detection

The only change you need is to add in your AndroidManifest.xml, inside the application element add:

<profileable android:shell="true"/>

Unfortunately, my device shows 0 "Janky frames", and a max of ~9% CPU usage while scrolling:

Next, I'll try a Google Pixel 2 XL, which might be the worst device I have.

Are you able to do this on your device? Supposedly we can see dropped frames in this "Janky frames" menu, and you can click and see what method caused it? Unsure how this will display for a MAUI app until we see it.

[jonathanpeppers]

Ok my Pixel 2 is on Android 11 (latest update available for it), and the above tooling only works on devices running Android 12...

[Kalyxt]

I found out that If I enclose entire DataTemplate with <Frame> it scrolls a lot better.
Here are samples with frame and without it.

<Frame BackgroundColor="Gray">
    <Grid Padding="2">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0" TextColor="White" Text="{Binding Name}"/>
        <Label Grid.Row="0" Grid.Column="1" TextColor="White" Text="{Binding Price}"/>

    </Grid>
</Frame>

With frame

recording_20220622_011608.mp4

recording_20220622_011526.mp4

Without frame

recording_20220622_011915.mp4

recording_20220622_011833.mp4

[jonathanpeppers]

@Kalyxt would you be able to test this .apk on your device?

com.companyname.test_collectionview-Signed.apk.zip

This has the changes in dotnet/maui/main + #8243.

This is built for android-arm64, but let me know if you need another architecture.

[jonathanpeppers]

This was probably closed on accident when a PR was merged.

[Kalyxt]

@Kalyxt would you be able to test this .apk on your device?

com.companyname.test_collectionview-Signed.apk.zip

This has the changes in dotnet/maui/main + #8243.

This is built for android-arm64, but let me know if you need another architecture.

I made new app with different name so I could switch between apps without uninstalling the previous one. Its hard to tell, which one is better for me. I used my co-worker for a test, I gave him your version of application to test scrolling then the original. He picked your version as better.

Slow scrolling is good on both, problem is when I scroll fast, it could be better.

I appreciate your help with this issue, I think its time to move on.
Thank you!

[BurkusCat]

I think the tradeoff here is the market share of these low-end devices, and is the goal for MAUI to run 100% perfect on them? If we wait some period of time, does the usage of these slower devices go away?

Personally, I don't think an issue like this should be weighed up against market share of low spec devices (deciding to drop support for older versions of Android? That is a perfect thing to weigh against market share). The issue should be Maui being benchmarked against other apps/frameworks. How do other apps/frameworks perform on a wide variety of devices?

It sounds like there are a few excited PRs that do fix some of the performance issues. I don't know if it has been benchmarked, but maybe that will have benefits in Debug/Hot Reload mode scrolling performance too which may benefit higher spec devices? :) Another good reason to avoid looking at it from a market share POV.

[jonathanpeppers]

We have not stopped working on performance, if you want to see the progress for MAUI in .NET 7 you can see it here:

https://github.com/orgs/dotnet/projects/139/views/1