5 ms·

Example: "Our app was mysteriously using 60% CPU and 25% GPU. It turned out this was due to a tiny CSS animation [of an equaliser icon]" https://www.granola.ai

Example: "Our app was mysteriously using 60% CPU and 25% GPU. It turned out this was due to a tiny CSS animation [of an equaliser icon]" https://www.granola.ai/blog/dont-animate-height https://www.granola.ai/blog/dont-animate-height

pinoy420 2y ago
[dead]
ericmcer 2y ago
Why was the solution to optimize the animation instead of... using a static asset?
- moffkalast 2y ago
  We paid for the whole CSS spec and we're gonna use the whole CSS spec.
  - joquarky 2y ago
    This, but for everything wevdev-related in the past ten years.
- jonas21 2y ago
  Because it provides an indication that the app is receiving your voice input?
  - teaearlgraycold 2y ago
    I think they're suggesting an animated PNG or GIF.
    - kccqzy 2y ago
      Or even better an animated SVG. Put it inside an <img> tag with a known width and height.
      - LegionMammal978 2y ago
        I'd be very surprised if SVG animations don't use substantially the same rendering paths that CSS animations do. In fact, if anything, I'd expect CSS animations to receive more time and attention from browser devs than the old SMIL elements and attributes, to whatever extent that they aren't equivalent internally.
        teaearlgraycold 2y ago
        SVGs are usually animated with CSS.
        kccqzy 2y ago
        Yeah but the crux of the problem is when height is animated the browser needs to redo the layout. Here the animation is contained entirely within an <img> tag with known width and height.
    - Joe_Cool 2y ago
      That's something I'd use a canvas or even a SVG for. SVG FFT Analyzer sound like a fun project. Oh, looks like I'm way late: https://cprimozic.net/blog/building-a-signal-analyzer-with-modern-web-tech/ https://cprimozic.net/blog/building-a-signal-analyzer-with-m...
    - jonas21 2y ago
      How would an animated PNG or GIF respond when the user is speaking?
      - teaearlgraycold 2y ago
        Switch between different PNGs depending on voice activity.
        lightedman 2y ago
        that's how veadotube works for vtubers.
      - talldatethrow 2y ago
        I assume there's a way to pause a gif.
  - deleted 2y ago
    [deleted]
- teaearlgraycold 2y ago
  That would be more optimized for sure. But it wouldn't be scalable and would take more work to create than what looks like a pretty simple change.
rplnt 2y ago
I remember Slack eating up my CPU when it had to display several animanted emojis at once. Use some 20+ emojis and the intel mb pro couldn't handle it. Luckily they knew and there was an option to disable the animation. Now I have no idea if they fixed it since or it is one of those things that was "fixed" by M1. Would like to see a write up on how it's even possible to achieve that when PCs from 20-30 years ago had no issue with such task.
- throwup238 2y ago
  > Would like to see a write up on how it's even possible to achieve that when PCs from 20-30 years ago had no issue with such task. Electron.
  - rplnt 2y ago
    But that's just a browser, right? I'm pretty sure my browser in 2005 could display dozens of gifs. There must have been a series of decisions by devs to do it in some super convoluted way. I can see each emoji being an iframe with a full react app doing the animation. But even that should be fine? Maybe?
    - throwup238 2y ago
      It's "just a browser" in the same sense that the Linux kernel and GNU are "just an operating system". It's one of the most complex pieces of software - perhaps even human designed systems - ever to exist and we're using it to render a few polygons and drop shadows because the C++ committee made a bunch of mistakes decades ago so now our webdevs are mortally afraid of CMake and Qt/QML. Or GTK. Or whatever. Pretty much the only people that seem to put out native GUI tools in any significant quantity are Apple developers. The tradeoffs that Blink and V8 engineers have made to support the entirety of the internet and the morass of web development precludes efficient use of resources for simpler purposes, like rendering an animation. After all, there a billion React hooks and ad tracking scripts to optimize, otherwise bounce rates will increase.
      - 2y ago
grrowl 2y ago
Or more recently, NPM's infamous "Progress bar noticeably slows down npm install #11283" issue [1]: https://github.com/npm/npm/issues/11283 https://github.com/npm/npm/issues/11283
- guappa 2y ago
  A thing I discovered by myself when I was a teenager: do not update progress bars on every loop.
  - Cthulhu_ 2y ago
    There's a lot of things front-end developers (be they web or graphical terminal) can learn from the game development world. I can recommend playing with e.g. Pico 8 sometime, it's artificially constrained so you have to work with the limitations instead of do the usual relatively naive work. It's LUA coding so it shouldn't be a problem for JS developers, assuming they don't mind working in a 20 column code editor (or thereabouts).
    - account42 2y ago
      Games developers are not magically safe from the progress bar mistake.
    - conductr 2y ago
      I think it’s more so important to get familiar with loop/event based programming. Most of my experience is in the request/response mindset of web requests so when I try out game dev, arduino dev, C# desktop apps, etc I find my mental model has to shift drastically Loops occur so fast it’s pretty standard to have to put some throttling logic in the code which I’ve never had to do in web dev except perhaps the document.ready statement in JavaScript to make sure the dom has been loaded.
  - accrual 2y ago
    Same here. I often implemented like this, where n was some reasonable value: if iteration % n === 0: update_progress()
emmanueloga_ 2y ago
This is why it pays out to turn on "Paint Flashing" [1] in the web console, even if just from time to time. -- 1: https://web.dev/articles/simplify-paint-complexity-and-reduce-paint-areas#use_chrome_devtools_to_quickly_identify_paint_bottlenecks https://web.dev/articles/simplify-paint-complexity-and-reduc...
- moffkalast 2y ago
  Me, who already renders a canvas on the whole page so it highlights the whole thing constantly: "Hmm yes the painting here is made out of painting."
  - emmanueloga_ 2y ago
    That's cool, I don't know how popular canvas heavy apps are these days, what kind of apps are you working with? I used to work on a set top box app, and for some of the features, replacing the whole page with a single canvas was the only way to get steady FPS.
ortsa 2y ago
This reminds me of having to go into spotify's package files to track down their version of this animation (an animated svg of a bar chart) and kill it, because it would destroy performance on my PC so badly that it was affecting other programs, causing hitches and freezes. The animation's still there — and my PC is better now, so it doesn't stutter — but I'm willing to bet it's still burning waaay too many watts, for something so trivial.
Dwedit 2y ago
CSS animations make Flash look efficient by comparison.

pinoy420 2y ago

[dead]

ericmcer 2y ago

Why was the solution to optimize the animation instead of... using a static asset?

moffkalast 2y ago
We paid for the whole CSS spec and we're gonna use the whole CSS spec.
- joquarky 2y ago
  This, but for everything wevdev-related in the past ten years.
jonas21 2y ago
Because it provides an indication that the app is receiving your voice input?
- teaearlgraycold 2y ago
  I think they're suggesting an animated PNG or GIF.
  - kccqzy 2y ago
    Or even better an animated SVG. Put it inside an <img> tag with a known width and height.
    - LegionMammal978 2y ago
      I'd be very surprised if SVG animations don't use substantially the same rendering paths that CSS animations do. In fact, if anything, I'd expect CSS animations to receive more time and attention from browser devs than the old SMIL elements and attributes, to whatever extent that they aren't equivalent internally.
      - teaearlgraycold 2y ago
        SVGs are usually animated with CSS.
      - kccqzy 2y ago
        Yeah but the crux of the problem is when height is animated the browser needs to redo the layout. Here the animation is contained entirely within an <img> tag with known width and height.
  - Joe_Cool 2y ago
    That's something I'd use a canvas or even a SVG for. SVG FFT Analyzer sound like a fun project. Oh, looks like I'm way late: https://cprimozic.net/blog/building-a-signal-analyzer-with-modern-web-tech/ https://cprimozic.net/blog/building-a-signal-analyzer-with-m...
  - jonas21 2y ago
    How would an animated PNG or GIF respond when the user is speaking?
    - teaearlgraycold 2y ago
      Switch between different PNGs depending on voice activity.
      - lightedman 2y ago
        that's how veadotube works for vtubers.
    - talldatethrow 2y ago
      I assume there's a way to pause a gif.
- deleted 2y ago
  [deleted]
teaearlgraycold 2y ago
That would be more optimized for sure. But it wouldn't be scalable and would take more work to create than what looks like a pretty simple change.

rplnt 2y ago

I remember Slack eating up my CPU when it had to display several animanted emojis at once. Use some 20+ emojis and the intel mb pro couldn't handle it. Luckily they knew and there was an option to disable the animation. Now I have no idea if they fixed it since or it is one of those things that was "fixed" by M1. Would like to see a write up on how it's even possible to achieve that when PCs from 20-30 years ago had no issue with such task.

throwup238 2y ago
> Would like to see a write up on how it's even possible to achieve that when PCs from 20-30 years ago had no issue with such task. Electron.
- rplnt 2y ago
  But that's just a browser, right? I'm pretty sure my browser in 2005 could display dozens of gifs. There must have been a series of decisions by devs to do it in some super convoluted way. I can see each emoji being an iframe with a full react app doing the animation. But even that should be fine? Maybe?
  - throwup238 2y ago
    It's "just a browser" in the same sense that the Linux kernel and GNU are "just an operating system". It's one of the most complex pieces of software - perhaps even human designed systems - ever to exist and we're using it to render a few polygons and drop shadows because the C++ committee made a bunch of mistakes decades ago so now our webdevs are mortally afraid of CMake and Qt/QML. Or GTK. Or whatever. Pretty much the only people that seem to put out native GUI tools in any significant quantity are Apple developers. The tradeoffs that Blink and V8 engineers have made to support the entirety of the internet and the morass of web development precludes efficient use of resources for simpler purposes, like rendering an animation. After all, there a billion React hooks and ad tracking scripts to optimize, otherwise bounce rates will increase.
    - 2y ago

grrowl 2y ago

Or more recently, NPM's infamous "Progress bar noticeably slows down npm install #11283" issue [1]: https://github.com/npm/npm/issues/11283 https://github.com/npm/npm/issues/11283

guappa 2y ago
A thing I discovered by myself when I was a teenager: do not update progress bars on every loop.
- Cthulhu_ 2y ago
  There's a lot of things front-end developers (be they web or graphical terminal) can learn from the game development world. I can recommend playing with e.g. Pico 8 sometime, it's artificially constrained so you have to work with the limitations instead of do the usual relatively naive work. It's LUA coding so it shouldn't be a problem for JS developers, assuming they don't mind working in a 20 column code editor (or thereabouts).
  - account42 2y ago
    Games developers are not magically safe from the progress bar mistake.
  - conductr 2y ago
    I think it’s more so important to get familiar with loop/event based programming. Most of my experience is in the request/response mindset of web requests so when I try out game dev, arduino dev, C# desktop apps, etc I find my mental model has to shift drastically Loops occur so fast it’s pretty standard to have to put some throttling logic in the code which I’ve never had to do in web dev except perhaps the document.ready statement in JavaScript to make sure the dom has been loaded.
- accrual 2y ago
  Same here. I often implemented like this, where n was some reasonable value: if iteration % n === 0: update_progress()

emmanueloga_ 2y ago

This is why it pays out to turn on "Paint Flashing" [1] in the web console, even if just from time to time. -- 1: https://web.dev/articles/simplify-paint-complexity-and-reduce-paint-areas#use_chrome_devtools_to_quickly_identify_paint_bottlenecks https://web.dev/articles/simplify-paint-complexity-and-reduc...

moffkalast 2y ago
Me, who already renders a canvas on the whole page so it highlights the whole thing constantly: "Hmm yes the painting here is made out of painting."
- emmanueloga_ 2y ago
  That's cool, I don't know how popular canvas heavy apps are these days, what kind of apps are you working with? I used to work on a set top box app, and for some of the features, replacing the whole page with a single canvas was the only way to get steady FPS.

ortsa 2y ago

This reminds me of having to go into spotify's package files to track down their version of this animation (an animated svg of a bar chart) and kill it, because it would destroy performance on my PC so badly that it was affecting other programs, causing hitches and freezes. The animation's still there — and my PC is better now, so it doesn't stutter — but I'm willing to bet it's still burning waaay too many watts, for something so trivial.

Dwedit 2y ago

CSS animations make Flash look efficient by comparison.