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.

▲

Rohansi 4 hours ago | parent | next [-]

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

	▲	troupo 3 hours ago \| parent [-]
		> 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.

▲

wiseowise 5 hours ago | parent | prev [-]

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.

	▲	troupo 5 hours ago \| parent [-]
		"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