Heatmap rendering performance when many slider steps

Hi,

This one is somehow related to https://github.com/plotly/plotly.js/issues/6521 but slightly different.

• when working with 1000 slider steps (Plotly slider), the rendering of this heatmap is quite slow (between 1 and 2 frames per second when moving the slider): https://jsfiddle.net/wh1o2pyq/1/

• When working with 50 slider steps (Plotly slider), the rendering is super fast (more than 10 fps): https://jsfiddle.net/wh1o2pyq/2/

• When working with 1000 slider steps but with a HTML slider instead of the Plotly slider (<input type="range">), it is super fast: https://jsfiddle.net/5L9ykt76/

TL;DR: Plotly slider with many hundreds of steps seems to be a bottleneck for heatmap rendering

Does this mean the slider itself is re-rendered for each update, making the whole thing slow?

I believe that solving this issue could have massive improvement on the responsiveness of every Plotly/Dash dashboard using sliders :)

Any idea?

Commencez par les trois reproductions JSFiddle liées, en comparant le Plotly slider avec 50 et 1000 étapes au HTML range slider. Profilez les mises à jour du slider et le rendu de la heatmap afin d’identifier le goulot d’étranglement ; le travail est terminé lorsque le Plotly slider à 1000 étapes répond nettement plus rapidement sans modifier le comportement signalé de la heatmap.