CODEWITHSUNDEEP
javascriptprofiling
beatgammit
beatgammit

Reputation: 20205

Javascript- Dynamically monitor CPU/memory usage

I'm considering writing a game in JavaScript using WebGL and associated technologies. I would like to make the game as intelligent as possible, so I'm looking into monitoring CPU/memory usage.

For example:

I would like to get the data that Chrome offers in it's Task Manager. I know how to track FPS, and that can lead to some flexibility, but I would like to be have as much information as possible. The main use case is for a 'low power' mode where the CPU is utilized as little as possible (for laptops) or an idle mode when the user is browsing forums, etc.

I know how to use profilers, but I would like access to these tools from JavaScript.

Is this possible? If not, do you know if it has been proposed for standardization?

I would be willing to live with an extension, as long as it could be queried from JavaScript, but I'd like to avoid it if a native feature exists. I'm trying to target recent versions of Firefox and Chrome, but I could restrict myself to a single browser if one supports this.

Upvotes: 26

Views: 29877

Answers (2)

NVRM
NVRM

Reputation: 13047

We can't retrieve CPU usage or RAM from client-side Javascript, but what matters is the refresh rate, the actual number of frames refreshed by seconds.

If the FPS is over 24 and steady, we simply feels no lags. Even safer over 30FPS, to keep a margin. This leave about 40ms for a frame refresh.

Simply, the following code calculate a frame time refresh, using requestAnimationFrame, convert it to an amount by second, and POST it to the server in JSON at the endpoint /usermetrics, using navigator.sendBeacon()

let t = Date.now();
requestAnimationFrame( () => {
  let fps = Math.round(1000 / (Date.now() - t));
  console.log(fps + "FPS");
  navigator.sendBeacon('/usermetrics', JSON.stringify(fps))
})

From the console we can observe the POST beacon.

enter image description here

You might have to use it strategically, depending the context of your app, basically reduce the load if the FPS goes under 30.

The Performance API

Another example, looping FPS counter

Upvotes: 0

Halim Qarroum
Halim Qarroum

Reputation: 14093

Well there is no direct javascript call to get such information (which would have been a serious security problem). But there's a solution for your problem, you can use worker pools which are litterally threads for javascript to emulate a function that will run some calculations in the background to compute the CPU usage. But since you're building a 3D application I will not advise to do this because it will unnecessarily cost you a lot of CPU usage to know the current level of CPU usage, which would be like killing a fly with a submachine gun.

What I advise you to do however is to only focus on frame per seconds because they are related to your application and are the exact benchmarking indication you need. Don't care about cpu load, your application doesn't directly depend on that, especially if you got a dual-core or quad-core processor. You should perhaps also look at GPU usage for your application and how you can fully take benefit of the GPU on a compatible browser (latest Chromes uses GPU acceleration).

Good luck with your game !

Upvotes: 16

Related Questions