7 ms·

Saw the window was a bit laggy so thought I'd delve deeper to figure out what was going on. This lib runs a a RAF animation loop every 8ms across every compone

by jlukic 2mo ago

Saw the window was a bit laggy so thought I'd delve deeper to figure out what was going on. This lib runs a a RAF animation loop every 8ms across every component on the page that causes the entire document to repaint. The comment above appears of the AI generated sort: // One shared animation frame: step every live component, park when idle. // The delta is capped so a background-tab pause never becomes one giant step. The "JellyEngine" instead of just calculating the jelly animation on pointer events is recalculating for every active component on the page every frame. This is the kind of thing usually a human notices and says 'dont do that, that is kind of crazy'.

wbobeirne 2mo ago
Running a performance profile in Chrome doesn't back this up for me, and looking at the loop it looks like it maintains an active `Set<JellyComponent>()` of which components to update, and clears them out when they stop moving. Agreed the comments look a bit slop-ish but I don't see anything obviously wrong with its approach, and the core loop is running in microseconds for me when nothing is happening.
- jlukic 2mo ago
  Here's the perf profile, just to clarify. Cursor idle, viewport on the button examples. 3ms repaint every 8-11ms. Animation frame points to the code i mentioned. https://postimg.cc/sQpZxxzv https://postimg.cc/sQpZxxzv The problem isn't doing work on a website, its if you have an idle task that is taking up a significant portion of the frame budget then its easy to have frame drops when you do significant work like clicking, scrolling, browsing. Idle work showing up in flamecharts is usually the thing to be cautious of.
  - Rohansi 2mo ago
    That's from Lottie, the animations that play in the header and footer of the page. Shrink your window until they disappear and try again.
    - edoceo 2mo ago
      Oh, yea, "you're holding it wrong"
      - raincole 2mo ago
        ? In this very particular case, yeah, the original commenter was holding it wrong, as they inspected the wrong thing. People sometimes hold things wrong and it's okay.
    - naikrovek 2mo ago
      Is it? I am in the middle of the page, the header and footer are well off into the distance not being rendered, and I see the same pattern. https://imgur.com/texxYP0 https://imgur.com/texxYP0
      - Rohansi 2mo ago
        Zoom in, take a look at what code is running, and you'll see it's all `lottie_light.min.js`. Being offscreen doesn't mean it's doing nothing. In fact, it looks like once it shows once it keeps spinning its RAF loop forever. Shrink your window so it disappears, reload, and then profile.
Rohansi 2mo ago
> This is the kind of thing usually a human notices and says 'dont do that, that is kind of crazy'. It's not crazy. That is literally what 99.99% of video games do. They repaint everything constantly, only limited by either your vsync rate or hardware.
- pennomi 2mo ago
  Presumably in a video game the majority of the screen changes every frame. Not so in web pages.
  - Rohansi 2mo ago
    My point was more that rendering a few widgets at 60+ FPS is nothing for anything with a GPU, and everything has a GPU these days. Anyway, something like this only needs to paint when states change or animations are running. That's an easy optimization to make here if it doesn't do it already. And games don't even bother with it, they repaint all UI even if it doesn't change.
    - altairprime 2mo ago
      Video games only get away with this because their energy draw is obvious: one launched the video game, so one expects the power draw. Visiting a web page does not have that action-reaction causality in people’s minds. Having a random web page introduce maximally-inefficient repaints also leads browsers to start reducing timeslices — especially those with any sort of power drain cognizance, such as Safari — which, here, leads to hella janky animations that can’t cope without their inefficient repaint loop. All this work to replicate the animated blobbiness of Liquid Glass. I thought everyone hated it! So, then, why is this a thing?
      - TheDong 2mo ago
        > Visiting a web page does not have that action-reaction causality in people’s minds It does in my mind. I fully expect visiting any of reddit.com, github.com, notion.so, or meet.google.com to have the chance to pin a cpu core at 100% for as long as the site is open. At this point, I expect the average webpage to use more CPU than any of the video games I play. The only reason I had to upgrade to my current machine is because a 2021 CPU (intel gen 11) wasn't capable of running notion.so or google meet anymore, it still ran all the video games I care about just fine.

by jlukic 2mo ago

wbobeirne 2mo ago

Running a performance profile in Chrome doesn't back this up for me, and looking at the loop it looks like it maintains an active `Set<JellyComponent>()` of which components to update, and clears them out when they stop moving. Agreed the comments look a bit slop-ish but I don't see anything obviously wrong with its approach, and the core loop is running in microseconds for me when nothing is happening.

jlukic 2mo ago
Here's the perf profile, just to clarify. Cursor idle, viewport on the button examples. 3ms repaint every 8-11ms. Animation frame points to the code i mentioned. https://postimg.cc/sQpZxxzv https://postimg.cc/sQpZxxzv The problem isn't doing work on a website, its if you have an idle task that is taking up a significant portion of the frame budget then its easy to have frame drops when you do significant work like clicking, scrolling, browsing. Idle work showing up in flamecharts is usually the thing to be cautious of.
- Rohansi 2mo ago
  That's from Lottie, the animations that play in the header and footer of the page. Shrink your window until they disappear and try again.
  - edoceo 2mo ago
    Oh, yea, "you're holding it wrong"
    - raincole 2mo ago
      ? In this very particular case, yeah, the original commenter was holding it wrong, as they inspected the wrong thing. People sometimes hold things wrong and it's okay.
  - naikrovek 2mo ago
    Is it? I am in the middle of the page, the header and footer are well off into the distance not being rendered, and I see the same pattern. https://imgur.com/texxYP0 https://imgur.com/texxYP0
    - Rohansi 2mo ago
      Zoom in, take a look at what code is running, and you'll see it's all `lottie_light.min.js`. Being offscreen doesn't mean it's doing nothing. In fact, it looks like once it shows once it keeps spinning its RAF loop forever. Shrink your window so it disappears, reload, and then profile.

Rohansi 2mo ago

> This is the kind of thing usually a human notices and says 'dont do that, that is kind of crazy'. It's not crazy. That is literally what 99.99% of video games do. They repaint everything constantly, only limited by either your vsync rate or hardware.

pennomi 2mo ago
Presumably in a video game the majority of the screen changes every frame. Not so in web pages.
- Rohansi 2mo ago
  My point was more that rendering a few widgets at 60+ FPS is nothing for anything with a GPU, and everything has a GPU these days. Anyway, something like this only needs to paint when states change or animations are running. That's an easy optimization to make here if it doesn't do it already. And games don't even bother with it, they repaint all UI even if it doesn't change.
  - altairprime 2mo ago
    Video games only get away with this because their energy draw is obvious: one launched the video game, so one expects the power draw. Visiting a web page does not have that action-reaction causality in people’s minds. Having a random web page introduce maximally-inefficient repaints also leads browsers to start reducing timeslices — especially those with any sort of power drain cognizance, such as Safari — which, here, leads to hella janky animations that can’t cope without their inefficient repaint loop. All this work to replicate the animated blobbiness of Liquid Glass. I thought everyone hated it! So, then, why is this a thing?
    - TheDong 2mo ago
      > Visiting a web page does not have that action-reaction causality in people’s minds It does in my mind. I fully expect visiting any of reddit.com, github.com, notion.so, or meet.google.com to have the chance to pin a cpu core at 100% for as long as the site is open. At this point, I expect the average webpage to use more CPU than any of the video games I play. The only reason I had to upgrade to my current machine is because a 2021 CPU (intel gen 11) wasn't capable of running notion.so or google meet anymore, it still ran all the video games I care about just fine.