← Back to context

Comment by Rohansi

2 days ago

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

  • > In none of them text is primary and all other incidental?

    This is a pretty outdated way of thinking. If we were only speaking about (old) HTML then maybe. But these days HTML and CSS are basically inseparable and go far beyond "text is primary".

    > In which UI framework actions like "set focus on an element" triggers a full page re-layout?

    I don't see why a browser would need to re-layout for just a focus change. Unless, of course, the CSS changes require a re-layout after the focus has changed (`:focus` selector).

    Every UI framework can run into performance issues with layout and/or painting if they're complex enough (or poorly made). There is fundamentally very few differences between HTML+CSS and other UI frameworks.

    • > But these days HTML and CSS are basically inseparable and go far beyond "text is primary".

      That "inseparable" is building on top of a bunch of legacy cruft, hacks and workarounds for a system that is stilm barely suitable to layout some simple text.

      Just because CSS is there it doesn't make the browser a UI framework.

      > I don't see why a browser would need to re-layout for just a focus change.

      Indeed. No one does. And yet you'd be surprised: https://gist.github.com/paulirish/5d52fb081b3570c81e3a (note: unfortunately there's no up-to-date list as some of these issues are fixed in all or some engines, and a bunch of other gotchas are introduced).

      > There is fundamentally very few differences between HTML+CSS and other UI frameworks.

      Lol. There's almost no other UI framework that struggles with as many trivial performance issues as HTML + CSS [1]. No other UI framework has so many gotchas and issues with even the simplest layouts and animations. No other UI framework has warnings of "you have 800 nodes, it's too big, and will cause issues". No other UI framework has so few ways of telling the framework "delay painting" or "I will take over painting" or "do these paints in batches" or...

      Etc. etc.

      [1] A good article that dives into just the animation side of things https://motion.dev/blog/web-animation-performance-tier-list