Javascript- Dynamically monitor CPU/memory usage

Question

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:

For high CPU usage, scale back the graphics a bit or offload computations to the server
For high memory usage, offload data to the server for storage (and later retrieval)

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.

Related if you're talking about performance optimizing CSS animations: https://stackoverflow.com/questions/28729514/detect-browser-graphics-performance https://stackoverflow.com/questions/39516931/how-to-get-cpu-usage-in-javascript/39517917 — V. Rubinetti, Jan 10 '22 at 15:40

score 16 · Accepted Answer · edited Dec 16 '17 at 15:58

16

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 !

edited Dec 16 '17 at 15:58

Bhargav Rao

50,140
28
121
140

answered Mar 02 '12 at 09:46

Halim Qarroum

13,985
4
46
71

2

I just found this API presentation on Intel's website, it should also interest you a lot http://software.intel.com/en-us/articles/intel-cpu-web-api-documentation-and-examples/ – Halim Qarroum Mar 02 '12 at 09:54
+1 That Intel link is pretty cool! I don't agree, however, that it would be a serious security problem, if it was limited per page (it could only see it's CPU/memory usage). I'll leave this open a few days just in case anyone else has an idea. – beatgammit Mar 02 '12 at 17:36
The video in the link is private. – Rafael Barros Jun 01 '14 at 22:40
Note: "The Intel Web APIs are implemented as browser plugins.", "Linux and Mac OS porting is underway" , and the thing seems to be discontinued. – Nickolay Aug 08 '15 at 17:17

NVRM · Answer 2 · 2022-09-06T19:21:35.707

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.

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

Javascript- Dynamically monitor CPU/memory usage

2 Answers2

Linked