amundsen | metadata driven application for improving the productivity | Database library

I am testing the dynamic change of the src property of an </code> inside a <code>Vue</code> template. In the test I am changing the src once a second. Within a couple of minutes my available memory was used by 88 % , eventually the computer froze in the end. I performed this test on a Windows 10 Machine with 32 GB Memory and Firefox Browser.</p> <p>However, I first noticed memory problems using a similiar approach on a Raspberry Pi 4 (4GB) using chromium-browser. I continuesly switched through multiple vue components (like slides). Some of them have <code>iframes</code> in them as well. Just like in the test from above, the memory leaked (not as fast but within couple of days), and the chromium-browser tab crashed, showing the <em>he's dead jim</em> smiley face.</p> <p>Here is the code from the test:</p> <pre><code><template> <div id="app"> <iframe :src="src" /> {{ count }} {{ src }} </div> </template> <script> export default { data() { return { src : "", source : [ "https://example.com/embeddedcontent/1", "https://example.com/embeddedcontent/2", "https://example.com/embeddedcontent/3", "https://example.com/embeddedcontent/4" ], count : 0, interval : null } }, mounted() { const interval = setInterval(() => { this.src = this.source[ this.count % this.source.length ]; this.count = this.count + 1 }, 2000); this.interval = interval; }, beforeDestroy() { clearInterval(this.interval); } } </script> </code></pre> <h2>Facts</h2> <ul> <li>Noticing same memory leak on different systems and browsers (<code>Win10/Firefox</code>, <code>Raspbian/chromium-browser</code>)</li> <li>Noticing same memory leak during development (HMR) and production build from Vue. Seperate Vue app though.</li> <li>The content of the iframe is unknown to me and could be anything, since the <code>src</code> property can be set to any URL.</li> </ul> <h2>Any ideas for preventing this ?</h2> <p>So far I only thought about refreshing the browser tab every couple of minutes. This would be kindof a hacky solution, since it is not tackling the source of the problem. Are there any alternatives to using <code>iframes</code> when I want to show another websites content inside my Vue App ? Is there are way to just clean up the whole <code>iframe</code> without anything being left behind ?</p> <h3>Update 2021/02/25</h3> <p>I now tried Edge Browser as well, same result (increasing memory overtime). I also tried Firefox Private mode, had only a very low impact (increasing memory but a bit slower). Compared production and development build of the vue example, no difference. I also tried a vanilla electron app with the following code (no vue):</p> <pre class="lang-js prettyprint-override"><code>let interval = null; let sources = [ "https://hurtigruten.panomax.com/ms-roald-amundsen", "https://hurtigruten.panomax.com/ms-fridtjof-nansen", "https://rosenalp.panomax.com/", "https://alpbach.panomax.com/galtenberg", ]; let index = 0; let count = 0; function startTheInterval() { interval = setInterval(() => { index = count % sources.length; count = count + 1; document.getElementById('monitor').src = sources[index]; },2000); } function clearTheInterval() { clearInterval(interval); } startTheInterval(); </code></pre> <p>Same result, increasing memory fast .</p>