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?

Beginne mit den drei verlinkten JSFiddle-Reproduktionen und vergleiche den Plotly-Slider mit 50 und 1000 Schritten mit dem HTML range slider. Profiliere Slider-Aktualisierungen und die Heatmap-Darstellung, um den Engpass zu identifizieren; abgeschlossen ist die Aufgabe, wenn der Plotly-Slider mit 1000 Schritten deutlich schneller reagiert, ohne das gemeldete Heatmap-Verhalten zu verändern.