100k rows should't make the UI laggy on a gaming PC
Today I decided to do a simple research project anyone can reproduce: make a list of 100,000 elements in your favourite UI library.
Why would I do something like this? We're all being told that modern UI libraries are "blazingly fast" and I really don't like this kind of marketing. Plus, I'm trying to find a suitable solution for developing cross platform applications, and I figured why not put them to the test?
Why such a big number? Well, I'm on the same PC that can run games with Ultra settings with millions of particles interacting with each other, so 100k shouldn't be that much, right...? right? (yeah, I know, GPU acceleration plays a big role here, but I still have 32GB and some 16 core at my disposal)
This post may sound like a rant, and it partially is, but it's also a way of contributing and maybe show some weaknesses that may be fixed in future releases of these libraries.
So, let's get to it:
- Tauri: it works just fine! Ok, it's not Rust doing the heavy lifting here, the underlying browser is clearly doing some clever list virtualisation (i.e. not rendering invisible elements) that you can spot it if you move the scrollbar quickly (source)
- gtk-rs: no visible virtualisation, but no lag either when scrolling. It does lag a bit when selecting elements though (source)
- Slint: it looks like the frame rate decreases a bit, the CPU usage is almost 50% on one of my cores, but definitely usable. I did find a weird issue though: dragging the scrollbar from top to bottom is not mapped correctly, I need to overshoot by quite a bit with the cursor to reach the bottom of the list (source)
- Iced: frames are skipped, the entire UI is laggy, the CPU core where the UI is running jumps to 100% (source)
Bonus: non-Rust libs
- Flutter: unusable. There is almost a 1 second delay between frames when dragging the scrollbar quickly (source)
- Jetpack Compose: it doesn't even start (not in the hardware accelerated emulator, nor on an actual device), it crashes trying to create the list. With 10k elements it manages to launch the app, but it's super laggy and after a couple of taps Android brings up the "app is not responding" popup (source)
Feel free to share your own findings!
FAQ:
- Did you build in release mode? Yes
- Flutter has a new rendering engine that should be faster, have you tried it? Yes, both Skia and Impeller were tested with similar results
- Jetpack Compose is not cross platform, why did you test it? Because JetBrains is using it to build Compose Multiplatform that would then make most things work seamlessly on iOS, Android and Desktop
Conclusion:
IDK, just use web tech for any UI I guess? Or go straight to Bevy or Unity or Unreal Engine if you have 100k elements. These were not satisfying results :(