Hacker News Reader

Comment by kevmoo1 | Hacker News Reader

Great question!

While we'd love to be the best solution for every problem, it turns out the HTML-based web has been highly optimized for decades for text-heavy, linear, reading experiences.

So we're staying focused on the places where Flutter does the best job: interactive, non-linear, more-create-than-consume.

So our sites use HTML & CSS: flutter.dev, dart.dev, pub.dev

And our devtools are built in Flutter Web: https://docs.flutter.dev/development/tools/devtools/overview Along with web experiences from rows.com, reflection.app, rive.app, supernova.io, and many more.

FYI: I'm the product manager working on Flutter and Dart web tech at Google

(edit: fixed domain, mis-added one app)

View on HN

> HTML-based web has been highly optimized for decades for text-heavy, linear, reading experiences

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.

(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.

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...

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.

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

What about the initial load time? Browser's don't have a Flutter client built in.

I know there's been a lot of good work in reducing this, lately my Flutter web app loads much faster, but it wouldn't get a great Pagespeed rank. That's why I link to it from the main HTML/CSS site.

Reply on news.ycombinator.com