【发布时间】：2021-05-14 13:36:34
【问题描述】：
我正在测试Vue 模板中<iframe> 的src 属性的动态变化。在测试中，我每秒更改一次 src。在几分钟之内，我的可用内存被 88% 使用，最终计算机最终死机。我在具有 32 GB 内存和 Firefox 浏览器的 Windows 10 机器上执行了此测试。
但是，我首先注意到在使用 chromium-browser 的 Raspberry Pi 4 (4GB) 上使用类似方法的内存问题。我不断地切换多个 vue 组件（如幻灯片）。其中一些也有iframes。就像上面的测试一样，内存泄漏（不是那么快，但在几天内），并且 chromium 浏览器选项卡崩溃，显示 he's dead jim 笑脸。
下面是测试代码：
<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>
事实
- 注意到不同系统和浏览器上存在相同的内存泄漏（
Win10/Firefox、Raspbian/chromium-browser） - 在 Vue 的开发 (HMR) 和生产构建期间注意到相同的内存泄漏。单独的 Vue 应用程序。
- 我不知道 iframe 的内容，可以是任何内容，因为
src属性可以设置为任何 URL。
有什么办法可以防止这种情况发生吗？
到目前为止，我只想每隔几分钟刷新一次浏览器选项卡。这将是一种 hacky 解决方案，因为它没有解决问题的根源。当我想在我的 Vue 应用程序中显示其他网站内容时，是否有任何替代方法可以使用 iframes？有没有办法清理整个iframe 而不会留下任何东西？
2021/02/25 更新
我现在也尝试了 Edge 浏览器，结果相同（增加内存超时）。我还尝试了 Firefox Private 模式，但影响很小（增加内存但速度有点慢）。比较了 vue 示例的生产和开发版本，没有区别。我还尝试了一个带有以下代码的香草电子应用程序（无 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();
同样的结果，快速增加内存。
【问题讨论】：
标签： javascript vue.js memory-leaks