Comment by Rohansi
2 days ago
> requiring a web browser to draw a UI takes a LOT of CPU and memory
What makes a browser so much more inefficient vs. other UI frameworks? Is it really the browser's fault or the website's you're visiting?
2 days ago
> requiring a web browser to draw a UI takes a LOT of CPU and memory
What makes a browser so much more inefficient vs. other UI frameworks? Is it really the browser's fault or the website's you're visiting?
What makes the browser slow and inefficient is the fact that it's not a UI framework. It's a system to display text and a couple of images on a 2D plane where every element depends on every other element.
Almost every single interaction and change requires the browser to recalculate the layout of the entire page and to redraw it. It's basically Microsoft Word, with nearly the same behaviors.
And there are no proper ways to prevent that behaviour. No lower and low level control over rendering. Awkward workarounds and hacks that browsers employ to try and minimize re-layouting and redrawing. Great rejoicing when introducing yet more hacks for basic things: https://developer.chrome.com/docs/css-ui/animate-to-height-a... etc.
> It's a system to display text and a couple of images on a 2D plane
And how is that different from a UI framework?
> Almost every single interaction and change requires the browser to recalculate the layout of the entire page and to redraw it.
What UI frameworks don't do this?
> And how is that different from a UI framework?
In none of them text is primary and all other incidental?
> What UI frameworks don't do this?
In which UI framework actions like "set focus on an element" triggers a full page re-layout?
Also, in which UI framework there's even a discussion of "try to not trigger re-paint/re-flow"?
And yes, I know about immediate mode UI where the entire layout is re-calculated every frame. But then they can usually render thousands of elements at 60fps.
2 replies →
That’s just plain wrong, even ChatGPT will rebuke your comment. I’m sure someone working on Blink/WebKit will just laugh at your comment.
"even ChatGPT" lol
Here's a deeper dive. It's about animations, but it explains issues in a nice way that "even ChatGPT" can understand: https://motion.dev/blog/web-animation-performance-tier-list
> What makes a browser so much more inefficient vs. other UI frameworks?
The fact that each app carries their own copy of the browser engine.
Teams, Chrome, Steam - that's at least three Chromium engine embeds that all take up hundreds of megabytes each. Not to mention Steam is in the background and has no windows visible, and yet it has the Chromium helper processes gobbling up RAM. WTF is this shit.
Life used to be easier in the Windows 98 days with OCX, you just dragged a webview in the VB6 application designer and that was it, and IIRC it was even possible to embed Firefox in the same way for a while...
> The fact that each app carries their own copy of the browser engine.
This has nothing to do with the browser itself. Ideally everything would use the same browser instead of shipping their own. On Windows it's already possible with WebView2 but developers need to choose to go that route. Teams should already be using it.