Page Unresponsive warnings during rapid Plotly.react updates with large SVG traces
0 reputation · 08 Feb 2024, 12:27 UTC
When a dashboard updates a Plotly figure through repeated Plotly.react calls with large SVG trace arrays, the browser can emit a "Page Unresponsive" warning because the main thread remains blocked during the render cycle. Because Plotly.js lacks a built-in asynchronous cancellation mechanism for renders already dispatched to the DOM engine, developers cannot reliably abort an in-flight update when newer data arrives.
The uncertainty is compounded by an unresolved behavior: when multiple rapid react calls are queued before a previous render completes, it is unclear whether the library guarantees consistent state synchronization or whether stale intermediate renders may overwrite newer data. Switching to WebGL-based traces such as scattergl reduces main-thread pressure, but the performance gap is version-dependent and varies by browser engine.
What is the expected behavior for state consistency when overlapping Plotly.react calls are issued on large SVG datasets? Is there a documented strategy for preventing main-thread exhaustion without relying on WebGL fallbacks? How should applications detect and discard superseded renders when cancellation is not natively supported?