I am testing the dynamic change of the src property of an <iframe> inside a Vue 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.
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 iframes 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 he's dead jim smiley face.
Here is the code from the test:
<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>
Facts
- Noticing same memory leak on different systems and browsers (
Win10/Firefox,Raspbian/chromium-browser) - Noticing same memory leak during development (HMR) and production build from Vue. Seperate Vue app though.
- The content of the iframe is unknown to me and could be anything, since the
srcproperty can be set to any URL.
Any ideas for preventing this ?
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 iframes when I want to show another websites content inside my Vue App ? Is there are way to just clean up the whole iframe without anything being left behind ?
Update 2021/02/25
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):
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();
Same result, increasing memory fast .