[WinUI] Creating a complex grid is very slow

[MartyIX]

Description

I have a non-trivial grid which I create by hand (not in XAML but by code) and it can easily take hundreds of milliseconds to show such a grid.

Steps to Reproduce

1. Fetch https://github.com/MartyIX/maui/tree/feature/2024-04-11-grid-perf (MartyIX@dbb147d)
2. cd src/Controls/samples/Controls.Sample.Sandbox
3. dotnet publish -f net8.0-windows10.0.19041.0 -c Release -p:PublishReadyToRun=false -p:WindowsPackageType=None
4. dotnet trace collect --format speedscope -- .\bin\Release\net8.0-windows10.0.19041.0\win10-x64\publish\Maui.Controls.Sample.Sandbox.exe
5. Click "Generate Grid" to generate a 30x30 grid and see how long it took.

It can take 900 ms, and then it speeds up after a several clicks to about 600 ms but it does not drop under that bound.

Speedscope

Maui.Controls.Sample.Sandbox.exe_20240411_223826.speedscope.json

From the data, it's clear that

maui/src/Controls/src/Core/Layout/GridExtensions.cs

Line 60 in 0a562dc

public static void AddWithSpan(this Grid grid, IView view, int row = 0, int column = 0, int rowSpan = 1, int columnSpan = 1)

takes a lot of time but it's very much unclear to me how to speed it up because it seems there is no batching support in MAUI right now.

Link to public reproduction project repository

https://github.com/MartyIX/maui/tree/feature/2024-04-11-grid-perf

Version with bug

8.0.20 SR4

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows, I was not able test on other platforms

Affected platform versions

Windows 10, Windows 11

Did you find any workaround?

No.

Relevant log output

No response

[daltzctr]

I reproduced this in release mode with the following code. The root page is just a ContentPage in a blank MAUI project.

private void Button_Clicked(System.Object sender, System.EventArgs e)
{
    List<Label> labels = new List<Label>();

    const int numRows = 30;
    const int numCols = 30;

    Stopwatch watcher = new Stopwatch();

    RowDefinitionCollection rowDefinitions = new RowDefinitionCollection();
    ColumnDefinitionCollection columnDefinitions = new ColumnDefinitionCollection();

    /* Configure sizing */
    for (int i = 0; i < numCols; i++)
    {
        rowDefinitions.Add(new RowDefinition(50));
        columnDefinitions.Add(new ColumnDefinition(50));
    }

    /* Add labels */
    for (int i = 0; i < numCols; i++)
    {
        for (int x = 0; x < numRows; x++)
        {
            labels.Add(new Label()
            {
                Text = $"Label {i}:{x}"
            });
        }
    }
    
    content.RowDefinitions = rowDefinitions;
    content.ColumnDefinitions = columnDefinitions;

    int z = 0;
    watcher.Start();
    /* Add content */
    for (int i = 0; i < numCols; i++)
    {
        for (int x = 0; x< numRows; x++)
        {
            content.Add(labels[z], i, x);

            z++;
        }
    }
    watcher.Stop();

    debugTxt.Text = $"Time Taken: {watcher.Elapsed.TotalMilliseconds}ms";
}

[MartyIX]

Master

Avg time to create a grid was: 920 ms

Branch with WindowsBatchPropertyMapper

Avg time to create a grid was: 694 ms (25% improvement)

https://github.com/MartyIX/maui/tree/feature/2024-04-12-grid-perf-full containing two commits

• MartyIX@8b98cfb
• MartyIX@33aa722

[MartyIX]

With

• [WinUI] Allocate less when updating gestures #21450
• [WinUI] GesturePlatformManager.Windows.cs - unused variable #21953
• [WinUI] Cache gesture event subscriptions #21959
• [Windows] Improve performance of ContentPanel.EnsureBorderPath #22346
• [WinUI] Optimize TransformationExtensions #22481
• [Windows] Remove workaround for label text decorations #22650

merged, it appears that about 300 - 400 ms out of original 900 ms were shared off based on speedscope in #22650 (comment). One should take these numbers with a grain of salt though. However, for 7 weeks of medium effort, I guess it's not bad.

Anyway, I would consider 100 ms to be more or less OK but 500 ms is still way too much. Not sure if we can get there. Let's hope so. Ideas are welcome.

Edit: my approach for the time being is to do only local optimizations.

[MartyIX]

I ported my grid demo from MAUI to a WinUI app (https://github.com/MartyIX/WinUiDemos/tree/perf/2024-07-10-Grid). The app just adds 30x30 (=900) TextBlocks to a StackLayout (so no grid structure) and it takes about ~100 ms to complete that operation.

It's not a grid as in this issue. However, it just shows a lower bound which should be more or less a target.

Right now, my MAUI use case with grid takes about 350 ms. We are very likely 3-4 times slower than what WinUI can offer right now (even though MAUI does more work because it creates a grid and the WinUI app just vertical layout of labels). So the comparison is not fair but still the target should be about 100 ms IMO. That would be perfectly fine performance.

With #23515, I can sometimes observe 250 ms to display a single grid and each grid appears to require 50 ms less time to display than with the MAUI main branch. So that PR should offer big time savings for complex apps (hundreds of milliseconds).

[baaaaif]

@MartyIX
I just want to say THANK YOU!
Your contributions have made our app super fast.
Actually, Microsoft should set up a MAUI bonus program and pay it out directly to you. You would have more than earned it @davidortinau.

I'd love to see your improvements for iOS and Android too

[MartyIX]

I appreciate the kind words.