canvas-gauges icon indicating copy to clipboard operation
canvas-gauges copied to clipboard

Performance issue with multiple gauges on the same page

Open frazer84 opened this issue 3 years ago • 5 comments

I've created a dashboard to show live data of aircraft instruments. It's about 10 different gauges with values updated every 500 ms. This works for a while, but quickly starts to lag and after a while, the whole page is almost unresponsive and only a few updates to the gauges can be seen.

I have disabled the animation, which helped to keep the update framerate at acceptable levels. But I really liked the smooth feeling of animated gauges.

Is there any way to optimize this?

Thanks for a nice library btw!

frazer84 avatar Dec 09 '21 21:12 frazer84

您的邮件我已收到,谢谢!

TuShen121 avatar Dec 09 '21 21:12 TuShen121

Here's a screenshot after making a Chrome DevTools profiling session: image

frazer84 avatar Dec 09 '21 22:12 frazer84

Hi, I had an issue where I suspected there was insufficent time to complete drawing / updating of a gauge. Under Windows 10 & Firefox. Possibly there is a mechanism to manage / determine if a gauge has completed the previous update request.

The issue seemed to build up as requests for gauge updates were successvily made.

My solution was to slow the update rates down, to permit a gauge to complete drawing the previous update. One would like 3 per second. I arrived at ~1.5s intervals in my solution to engineer some design margin. Though tend recall nearer 0.7s update rate was the practical limit on the system tested at the time.

Hope this helps.

OneOfTheInfiniteMonkeys avatar Jan 02 '22 19:01 OneOfTheInfiniteMonkeys

I found that I had to run .update({...}) every 6 seconds to clear out things to be the solution

socks415 avatar May 02 '23 15:05 socks415

您的邮件我已收到,谢谢!

TuShen121 avatar May 02 '23 15:05 TuShen121