Cross-browser Performance

plotly.js
1

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

2

Thanks very much for this very detailed report.

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

3

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