3 ms·

(disclaimer: I work on Flutter Web) It's mostly about algorithmic trade-offs. When you know your content layout is static and is highly biased towards vertical

(disclaimer: I work on Flutter Web) 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.

owenpalmer 4y ago
Interesting, that makes perfect sense from the perspective of working with existing browsers. I think it's awesome that the flutter team is making canvas work. 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...
- skybrian 4y ago
  Many modern web pages are extremely bloated. Consider all the videos on an ad-heavy website. Often there are hundreds of http requests. 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.
  - owenpalmer 4y ago
    I agree, they're terribly bloated. > 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

owenpalmer 4y ago

Interesting, that makes perfect sense from the perspective of working with existing browsers. I think it's awesome that the flutter team is making canvas work. 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...

skybrian 4y ago
Many modern web pages are extremely bloated. Consider all the videos on an ad-heavy website. Often there are hundreds of http requests. 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.
- owenpalmer 4y ago
  I agree, they're terribly bloated. > 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