If browsers offered a lower level graphics API, would that give a significant performance improvement over canvas?
What is the performance bottleneck for flutter web? Is it the overhead of drawing to the canvas, or dom tree optimization?
I'm very interested in this topic.
It's mostly about algorithmic trade-offs. When you know your content layout is static and is highly biased towards vertical scrolling, you take different kinds of performance trade-offs, such as pre-computing and caching layout and painting output. Like when you know your array is sorted, you can use binary search to find an element instead of scanning. When pages do invalidate HTML layout you will actually see very bad jank. This is one of the classic performance pitfalls on the web, even using "classic" frameworks, like React or Angular. Flutter's current widgets and rendering primitives are biased towards dynamic content, where over-computation like this would hurt performance when you layout or paint isn't stable. Instead, we optimize for volatile content, using tricks like lazy rendering and repaint boundaries. We can still add primitives needed to render static content efficiently. We just feel like we're not yet sufficiently done with the non-static case.
But what I'm curious about is why an average consumer laptop can render a game with 3D projection, PBR, physics, and multiplayer networking, made by a newbie in a game engine. But that same laptop struggles to render a webpage. Even an extremely complex and content-heavy webapp is nothing compared to a game.
There has to be a bottleneck other than dom optimization, right? Like I mentioned before, canvas painting must have huge overhead...
A beginner’s video game will be relatively lightweight in the sense of not having a lot of large assets, and what they have is pre-loaded.
> A beginner’s video game will be relatively lightweight
What I meant by this point is that a newbie wouldn't know how to optimize their game, yet it performs better than many webpages