Grafik plotly.js ohne GUI einfrieren (Web Worker?)

Question

Ich arbeite an einem Dashboard, wo Benutzer ihre eigenen Visualisierungen (mit plotly.js) erstellen können. Manchmal führt die Komplexität dieser Visualisierungen zu einer langen Renderzeit, die zu einem Einfrieren der Browser-Benutzeroberfläche führt.

Ich habe bereits Web-Arbeiter für andere Aufgaben in meinem Dashboard erstellt. Vielleicht gibt es eine Möglichkeit, plotly.js Graphen in einem Web-Arbeiter wiederzugeben und sie zum Hauptthread zurückzubringen?

Ich weiß, dass es keine DOM/Canvas-Fähigkeit in Web-Arbeitern gibt. Aber vielleicht gibt es einen Trick oder Sie kennen einen besseren Weg, um das Einfrieren der GUI zu verhindern? Vielleicht Outsourcing Rendering auf Server mit Phantomjs (ich habe es nie verwendet, so ist es nur eine Vermutung, dass es mit pjs funktionieren könnte).

Answer 1

Eine mögliche Lösung für Ihr Problem könnte die OffscreenCanvas API sein: https://developer.mozilla.org/de/docs/Web/API/OffscreenCanvas

Sie diese API von einem Arbeiter zugreifen können und vielleicht ist es auch direkt mit der Bibliothek verwenden, die Sie erwähnt.

Aber als Browser-Unterstützung ist wirklich schlecht und (zumindest in Firefox, ich weiß nicht, wie es derzeit mit anderen Browsern ist, https://bugzilla.mozilla.org/show_bug.cgi?id=801176) 2d Canvas-Kontext wird nicht unterstützt (aber wenn Sie eine Bibliothek verwenden, die WebGL verwendet wäre kein Problem).

Als Alternative könnte man ein reines Javascript polyfill zu verwenden (es ist eine Neuimplementierung) der Leinwand, die in Webworkers funktioniert: https://www.npmjs.com/package/canvas-webworker Es ist erwähnenswert, dass auf diese Weise keine Hardware-Beschleunigung ist appliable.

In Kombination könnte eine gute Lösung erstellt werden.