WASM performance is disappointing, what am I doing wrong?

[sinatrocious]

I've created a new "Avalonia Cross Platform Application (AvaloniaUI)" added ListBox to it and run "AvaloniaApplication1.Browser".

... I was disappointed: 5 seconds to load, 10 seconds of freezing during scroll down and then another 2 when scrolling up ...

So what's wrong? Debug/Release doesn't seems to matter. I've tried to fiddle with RunAOTCompilation and WasmEnableThreads (installing net8 sdk and toolchains) and had some horrible experience of failing I wish to no one to have.

Why Avalonia is so slow on web platform?

Repro

Modify MainViewModel.cs:

public class MainViewModel : ViewModelBase
{
    public record Item(string Name, string Text);

    public AvaloniaList<Item> Items { get; } = [];

    public MainViewModel()
    {
        for (int i = 0; i < 100; i++)
            Items.Add(new(i.ToString(), i.ToString()));
    }
}

Add in MainView.axaml:

<ListBox ItemsSource="{Binding Items}"/>

Versions:

• Microsoft Visual Studio Professional 2022 (64-bit) 17.12.5
• Avalonia for Visual Studio 2022 11.8
• Avalonia Template Studio 1.4
• Avalonia.Templates.11.2.1.1.nupkg

[kekekeks]

Debug mode uses Mono interpreter. Since Avalonia does it's own layout, rendering and other stuff, that's rather taxing on the perf. Use AOT-published build for performance measurement.

[sinatrocious]

I've tried publishing as per docs and its fast!

What is "AOT-published build"? Do you refer to a setting RunAOTCompilation as true? With this setting dotnet publish produces not-working build, with errors related to SharedArrayBuffer, but it's another question to ask.

[maxkatz6]

@sinatrocious the main point is on "publish" command (or VS UI that uses publish command internally). "dotnet build", even in release mode, doesn't have all optimizations necessary to make WASM faster.

AOT compilation, i.e. RunAOTCompilation, is optional, and can only be applied on publish. It improves performance, but increases binary size substantially.

with errors related to SharedArrayBuffer

This error indicates either that your browser doesn't support threading (unlikely), or that your static web server doesn't set necessary headers (in which case error should explain which headers, you can apply them later on your static server, dotnet serve can specify custom headers too)

[BobbyCannon]

I cannot use aot due to me using a lot of reflection but I looked into how the solitaire example runs so well with multithreaded. The solitaire example does not use aot either. And I'm not sure if this would even help with your issue.

I found this to be something you may want to consider. If not, then just ignore my message.

<ControlTheme x:Key="{x:Type BrowserThreads}" TargetType="BrowserThreads">
	<Setter Property="Template">
		<ControlTemplate>
			<Border x:Name="PART_OuterBorder">
				<ContentPresenter x:Name="PART_ContentPresenter"
						Content="{TemplateBinding Content}"
						ContentTemplate="{TemplateBinding ContentTemplate}" />
			</Border>
		</ControlTemplate>
	</Setter>
	<ControlTheme.Animations>
		<Animation Duration="0:1:0" IterationCount="Infinite" PlaybackDirection="Alternate">
			<KeyFrame Cue="0%">
				<Setter Property="BorderBrush" Value="Transparent" />
			</KeyFrame>
			<KeyFrame Cue="100%">
				<Setter Property="BorderBrush" Value="Transparent" />
			</KeyFrame>
		</Animation>
	</ControlTheme.Animations>
</ControlTheme>

/// <summary>
/// Just a hack to allow the browser to animate correctly?
/// </summary>
public class BrowserThreads : CornerstoneContentControl
{
}

Then add this to your "mainview.xaml".

<BrowserThreads />

I do not know why but this makes my browser app run butter smooth even with multithreading turned on.