Memory leaks for streaming timeseries

plotly.js
1

I have tried to make a streaming time series plot but dont get smooth performance, it makes small pauses here and there. I have tried to have three plots with 1000 data points using scattergl and extendedTraces. Code in https://jsfiddle.net/ndztq694/
Looking at the performance report in google chrome I see that the fps is no stable and that nodes and listeners keeps increasing. Perhaps the lagging is due to when the nodes and listeners are cleared?

image
image1766×953 131 KB

I have tried to reproduce it in jsfiddle but everything runs smooth there, with number of nodes and listeners stable. In my project I use webpack 4.44.2 so it might be because of that? I also started to use Vue in some parts of the project but have tested this both in plain js and in a vue component without any difference.

I have used the recommended way to set up plotly.js with webpack according to this GitHub - plotly/plotly-webpack: Example repo for bundling plotly.js with webpack and browserify
Also tested to install
npm install --save ify-loader
and add the rule
{
test: /.js$/,
loader: ‘ify-loader’
}
to my config according to the “webpack user?” chapter in Getting Started | JavaScript | Plotly But didnt see any improvement.

Any ideas what it could be or how I could proceed with my troubleshooting?

2

After playing around more with it I realized it was quite simple for me to reproduce.
If I look at the streaming example from plotly it all looks fine in the codepen https://codepen.io/plotly/pen/dRaawR ( a straight line for heap and DOM nodes)

But when I copy it to my local computer. create a index.html with this content

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
  <script src="main.js"></script> 
</body>

And a main.js with this content

function rand() { 
  return Math.random();
}

Plotly.plot('graph', [{
  y: [1,2,3].map(rand),
  mode: 'lines',
  line: {color: '#80CAF6'}
}]);

var cnt = 0;

var interval = setInterval(function() {
  
  Plotly.extendTraces('graph', {
    y: [[rand()]]
  }, [0])

  if(cnt === 100) clearInterval(interval);
}, 300);

I get the following result when I open the html file directly in Chrome 90.0.4430.72. Is this how the nodes and heap size is expected to look? And how come it looks different when running the codepen vs locally?

image
image1920×1032 130 KB