Poor performance in WASM

[nerocui]

What would you like to be added:

The performance in web is really bad. Just generally clicking on buttons, navigating around and opening menus is really laggy.

https://github.com/unoplatform/Uno.Gallery/assets/10738280/5dd855f1-145b-4cd2-a2fb-b2d493b4c86b

Why is this needed:

The gallery shows the capability of the framework, so it matters what impression it gives. With it being this slow, it gives devs little to no reason to continue looking into the product.

For which Platform:

• [ ] iOS
• [ ] Android
• [x] WebAssembly
• [ ] WebAssembly renders for Xamarin.Forms
• [ ] Windows
• [ ] Build tasks

Anything else we need to know?

uno gallery trace.zip uno gallery trace chrome.zip

I took this trace in perf dev tool. All the UI interaction are blocking main rendering thread, leaving the application unresponsive. The bottom of all the call stack are the js-to-wasm:f:f call that maps perfectly to all the dropped frame intervals.

Edge

Chrome

System Info

Device name Thinkpad Processor 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz 2.30 GHz Installed RAM 32.0 GB (31.8 GB usable) System type 64-bit operating system, x64-based processor Pen and touch Pen support Edition Windows 11 Enterprise Version 23H2 Installed on ‎2024-‎01-‎29 OS build 22631.3085 Experience Windows Feature Experience Pack 1000.22684.1000.0

Browser

• Edge Version 121.0.2277.110 (64-bit)
• Version 121.0.6167.161 (64-bit)

[jeromelaban]

Thanks for the report. This is indeed a poor performance in your video, though this may be related to the way the browser is configured. When reporting issues, it's very important to provide information about the environment, your machine, the browser version, etc...

Specifically here, it may be that the browser is disabling the WebAssembly AOT compiler, making the application perform poorly.

[nerocui]

Sorry for not including the system info. I added them in and also tried in Chrome (originally was in Edge). The performance in Chrome is much better. However on interaction (clicking, navigating, UI change) it still blocks the main render thread as shows in the perf trace. I added the trace from Chrome in the description.

[jeromelaban]

Thanks. Can you make sure that you're not using any performance optimizations that may degrade the performance (sometimes it's called secure browser or "enhanced security mode") ? It feels like there's something causing the code to run very slowly in your environment. Note that opening the debugger window will make the app a lot slower.