Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.58k stars 396 forks source link

Performance issue with multiple gauges on the same page #249

Open frazer84 opened 2 years ago

frazer84 commented 2 years ago

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!

TuShen121 commented 2 years ago

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

frazer84 commented 2 years ago

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

OneOfTheInfiniteMonkeys commented 2 years ago

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.

socks415 commented 1 year ago

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

TuShen121 commented 1 year ago

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