How can I fix memory management and performance issues in my real-time dashboard using JS?

I've dealt with performance issues while plotting with canvas as well, and I noticed that a lot of the bottleneck is related to the browser's rendering capabilities when it comes to drawing many line pixels. I downsample my plotting automatically, but still ended up with dropped frames. Depending on your needs, using a WebGL canvas could vastly improve the results. It's worth experimenting with, as I’ve seen better performance on that front.

Check if each event is queuing its own requestAnimationFrame. It might be useful to create a pool for rAF calls where you manage a queue and trigger only one rAF at a time—this could reduce the lag by controlling how often the updates happen.

You could cache the data from the last check and only send new data points to the web worker for processing. This should cut down on unnecessary processing and help the performance overall.

It sounds like your requests are stacking up because they're being made at the wrong time. Try to limit those requests to only occur once a response has been fulfilled and the canvas has been updated. Think of it as comparing recursive timeouts versus intervals—only update when it's necessary.

One option to consider is using libraries like Phaser.js or Pixi.js for canvas updates. They might handle the rendering more efficiently. You also might want to think about implementing back-pressure in your application—decide if it's more important to process all data or to simply display the most recent changes. This could help manage the flow better.

Setting up a recursive requestAnimationFrame might help, too. This way, the function calls itself after every frame, allowing you to check for socket events and update accordingly within that loop. With the refresh rate of the browser, it should keep things moving smoothly; especially with thousands of updates per second.