Reducing CPU utilization when Pixi app is in background

[jay3sh]

I noticed that in my game the Pixi Application takes lot of CPU resources when it's running. Even when it's in background or is not visible, it consumes the CPU. Two Chrome processes are constantly using 25-30% CPU on my linux box (more on my macOS). It became very troublesome while working from a cafe on my macbook pro without charger. The app drained by battery in no time.

Only way to avoid this is to stop the pixi application ticker when you don't want it to consume resources. For a typical Pixi.js application, i.e. a game, it does make sense for the game to pause when it goes in background. Therefore I wrote this small routine using the `blur` event handler, to pause the Pixi app, whenever the window looses focus. This drops the CPU usage to 6-7% by Chrome processes.

In a browser or electron app, the window.onblur callback will get called whenever the focus switches from the app window to some other application (or even dev console). However in jsfiddle environment, you need to click on the application first and then click somewhere else for testing this functionality. That's because the code runs inside an iframe on jsfiddle page. The simple resume dialog lets you resume the app when you want.

You can try it here: https://jsfiddle.net/jay3sh/ft8am5fr/13/

If you have any other tips, or suggestions to reduce CPU usage, I would love to know.

[ivan.popelyshev]

Application is a mashup of ticker,loader,renderer and other things: https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js

You referenced basic webgl app. I dont know what's linux box, but macs are evil, they really cant handle html5 apps at 60FPS, especially those with retina screen at 4k resolution.

Suggestion: use DOM-based renderer, or ask Apple why dont they implement more effective browser.

[ivan.popelyshev]

Also, sometimes its "composite layers" fault. Dont put any html elements over that canvas.

[ivan.popelyshev]

Its not the first time we have this issue. Some laptops have power-safe modes that are affecting html5 in strange ways. Its not possible to fix that from dev-side

[jay3sh]

6 hours ago, ivan.popelyshev said:

but macs are evil, they really cant handle html5 apps at 60FPS, especially those with retina screen at 4k resolution.

I agree. Chrome shows 200% cpu usage for the tab running pixi app. I think that's combined usage of gpu process and main tab. So the code snippet above is just a little workaround to quite the CPU down when app is in background.

[ivan.popelyshev]

Are you sure there are no extensions installed in the browser?

[jay3sh]

28 minutes ago, ivan.popelyshev said:

Are you sure there are no extensions installed in the browser?

I'm sure it's not due to any extensions. I can even narrow it down to pixi's event loop, because when I call stop() on the ticker, the CPU usage clearly drops.

[xerver]

Have you profiled it to determine what is eating the CPU?

[jay3sh]

4 hours ago, xerver said:

Have you profiled it to determine what is eating the CPU?

I did some CPU profiling, couldn't get much out of it at this time. But I'm not complaining about the ticker consuming the CPU when active. In fact I'm getting near 60fps result, so there's nothing wrong with performance. I just found it odd that when the app goes in background the app still keeps consuming CPU and I've to explicitly stop() the ticker. Thought others will find this detail useful, because such app running in background could drain the laptop battery real fast.

[xerver]

1 hour ago, jay3sh said:

I did some CPU profiling, couldn't get much out of it at this time. But I'm not complaining about the ticker consuming the CPU when active. In fact I'm getting near 60fps result, so there's nothing wrong with performance. I just found it odd that when the app goes in background the app still keeps consuming CPU and I've to explicitly stop() the ticker. Thought others will find this detail useful, because such app running in background could drain the laptop battery real fast.

The only reason anything would stop in the background is the browser stops it. Since the event loop is controlled by the user in Pixi, we don't (and shouldn't) touch what your event loop does at any time.