Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Cross-browser Performance

I have noticed that different browsers are yielding drastically different performance results. Specifically Chrome 56, Firefox 51, IE11, and Edge. The plot I have been targeting has ~20k points being plotted and I have tried rendering the plots nested inside iframes and also using inline JS. Chrome rendering speeds are more than acceptable at 1100-2300ms but Firefox is rendering at 6300-7000ms. I have tried using Plotly.newPlot and Plotly.plot but both behave identical (are they identical functions?).

I know Microsoft support begins at IE11 but IE11 and Edge load times are atrocious at 15000-40000ms. At this point I am somewhat chalking this up to the JS rendering engines of each of the browsers but I am concerned of the extremely long load times as our application will have multiple plots with >20k points. Not sure if this is because of the number of points in the plot, rendering engines, or the way I am calling the plotting functions.

The Codepen is linked below but the points seem to freeze the plot (Chrome) from rendering in the editor except for in developer mode.

Codepen

Marcus

Thanks very much for this very detailed report.

You can try using our scattergl trace type (see comparison here) when plotting large datasets.

Thanks for the help. The plots with >20k points load significantly quicker (1200-2500ms) using the WebGL method. The shame is the SVG’s just have a better UI feel to them so I went with a hybrid approach to load SVG for Chrome and <1k point plots on other browsers and WebGL for everything else. Aiming for a best of both worlds approach.

Thanks,

Marcus