Render plotly.js graph without GUI freezing (Web Worker?)

Question

I'm working on an dashboard where users can build their own visualizations (with plotly.js). Sometimes the complexity of these visualizations are resulting in a long rendering time which leads to a freezing Browser UI.

I've already created web-workers for other tasks in my dashboard. Maybe there is a way of rendering plotly.js graphs in a web-worker and return them to the main thread?

I know that there is no DOM/Canvas ability in web-workers. But maybe there is trick or you know a better way to prevent GUI freezing? Maybe outsourcing rendering to server with phantomjs (I've never used it so it is just a guess that it could work with pjs).

Answer 1

A possible solution for your problem could be the OffscreenCanvas API: https://developer.mozilla.org/de/docs/Web/API/OffscreenCanvas

You can access this API from a worker and maybe also use it directly with the library you mentioned.

But as browser support is really bad and (at least in Firefox, I don't know how it currently is with other browsers, https://bugzilla.mozilla.org/show_bug.cgi?id=801176) 2d canvas context is not supported (but if you use a library which uses WebGL that wouldn't be an issue).

As an alternative, you could use a pure javascript polyfill (it's a re-implementation) of canvas which works in WebWorkers: https://www.npmjs.com/package/canvas-webworker It's worth mentioning that this way no hardware acceleration is appliable.

In combination, a good solution could be created.