profiling - Javascript- Dynamically monitor CPUmemory usage - Stack Overflow

admin管理员组

文章数量:1193778

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.

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.

• javascript
• profiling

Share Improve this question Follow asked Mar 2, 2012 at 9:16 beatgammitbeatgammit 20.2k2020 gold badges9090 silver badges131131 bronze badges 1

• Related if you're talking about performance optimizing CSS animations: stackoverflow.com/questions/28729514/… stackoverflow.com/questions/39516931/… – V. Rubinetti Commented Jan 10, 2022 at 15:40

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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 !

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

本文标签： profilingJavascript Dynamically monitor CPUmemory usageStack Overflow