High CPU usage after the player stays in background for a while

Description

I’ve implemented an Audio player with VideoJS and we noticed a very high CPU usage after sustained usage in background.

We did some tests and it happens also with the standard demo: https://videojs.com/advanced/

Steps to reproduce

  1. Open Chrome browser and go to the demo page: https://videojs.com/advanced/
  2. Open the DevTools
  3. Toggle DeviceToolbar in the window and throttle the CPU to Low-end mobile (this step will make it easier to highlight the problem, but the issue is visible also at full CPU)
  4. Start playing and put the window in background for 30 minutes
  5. Open the window and try to scroll, the page will not respond for some seconds, the more you keep the player in background the more the seconds, eventually will completely block the page

I was able to profile it on my mac with the following procedure:
1-2-3: as above
4. Detach the DevTools from the Window and put the window with the player in background by clicking the yellow round button in the window top bar to minimise it to the dock
5. You should now only have the DevTools window opened, press Cmd+H to hide the browser completely and wait
6. Show Chrome again but clicking on the Chrome icon, you should now see the DevTools window but not the player window that it’s still minimised
7. In the devtools window, go to the performances tab and start recording
8. Maximize the player window and wait until the window start reacting again
9. Stop the profiler in the DevTools window and see the results

You can notice a 100%% cpu usage for some seconds until it goes back to normal:

Screenshot 2019-04-15 19 25 12

Screenshot 2019-04-15 19 25 51

I’ve tested on multiple Macs (even very fast ones).

Any suggestions?

Thanks,
Dem

2 thoughts on “High CPU usage after the player stays in background for a while

  1. @demetrio812
    I Found out this issue is caused by the code here.

    The following code is executed every 30ms, when user leave the current tab, setInterval still keeps working.

    this.requestAnimationFrame(() => {
         this.update();
    });
    

    But requestAnimationFrame(callback) queues up the callback function when user leave the tab, and try to clear the queue when user back. So if user leave this tab for half an hour, when user come back, there are thousands of callbacks in the queue.

    See minimal reproducible code here

    It exists in version 7.3.0, newest version doesn’t have this issue.