Bad performance updating graphs with live-data

[hcaloto]

I have an issue when updating data traces, somehow the thread is being blocked while data is updated.

I've created an example at codepen

There, we have 3 graphs that get updated using random data once a second. I have added a timer so you can see how the time stops and restarts when updating the graphs. I've tested it with Chrome and Firefox.

This is the way I thought I could showcase the issue, although my real use-case is more severe as I'm have a couple webrtc live video streams displayed along the graphs and the framerate drops to unbearable levels once the graphs update.

I am using extendTraces to update data, maybe I am confused and I should be using another method.

[monfera]

@hcaloto indeed the top-right time counter very briefly balks around every second, and you're correct to say it's because updating the plotly traces takes some nonzero time, likely a good bit more than 16ms because that's the refresh rate so even at 16ms there wouldn't be a noticeable balk.

JavaScript in the browser is single-threaded and if the thread is doing something else, e.g. recalculating and redrawing charts, no other async event will be executed.

The way setInterval works is, with simplification, is that if the thread is free, and the internal clock says it's time for the next setInterval run, then it runs. If the thread is busy, it won't happen. JS doesn't have preemptive multitasking. One would need to use Web Workers or Service Workers to introduce concurrent execution but those don't have DOM access. Even the closest thing to multitasking - ES2015 generators - only provide cooperative multitasking.

We have certain plot types that we already optimized for instantiation and esp. update latency, e.g. pointcloud can be refreshed in 30ms for 1m points which means a clock balk would be invisible with a smaller dataset, but most plots currently take a longer time. It'd be a good bit of work to refactor for low latency or at least incremental operations, and can't be done across the board without initiating a larger project.

[monfera]

Just took another quick peek at the pen and realized you can amortize the cost of rendering, e.g. with a staggered update (codepen):

It may or may not help much with video playing though as video players run in the main thread too, unfortunately. Maybe server side rendering and updating plot SVGs or images would be an (inconvenient) workaround. We've got ongoing efforts toward speedup e.g. #1316

[etpinard]

This issue won't result in a pull request, so I'll close it.

@hcaloto if you need more help optimizing your graphs, reach out to us on https://community.plot.ly/