nibbydev/poewatch

Live update animation CPU usage

coldino opened this issue · 3 comments

coldino commented

Love the site!

One minor issue: You're currently animating width on the live update progress bar, and this causes excessive CPU usage because it forces the browser to refresh the layout and therefore repaint the entire page each frame.

I'm sure there are many ways to avoid forcing layout but there are two I know that might work for you:

  • animate transform scaleX
  • use a linear-gradient and animate the background-position
nibbydev commented

Cheers!
Do you mean the progress bars on the prices or the leagues page?

coldino commented

Ah! Didn't realise the leagues progress was live until now. I was talking about the one on the prices page that you can turn on/off. Even though the interval in the leagues page is doing significantly more its CPU usage is actually lower because layout is not affected.

Previous testing has been in Chrome. Just tested in Edge and both pages have good performance there already. Chrome just needs a little help.

Here's a fix:

#progressbar-live {
  width: 100%;
  transform-origin: left;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes progressbar-live {
  from {transform: scaleX(0)}
  to {transform: scaleX(1)}
}

Drops CPU usage from 50% of one core to purely background levels.

nibbydev commented

Fixed in dev branch and live environment.
Ty for the heads up!