我正在测试src
模板中<iframe>
属性的动态变化。在测试中,我每秒钟更换一次src。几分钟内,我的可用内存就被88 %的人占用了,最终电脑就冻结了。我在一个32 GB内存和Firefox浏览器的Windows 10机器上执行了这个测试。
然而,我首先注意到,在使用铬浏览器的Raspberry Pi 4 (4GB)上使用类似的方法存在内存问题。我继续切换多个vue组件(如幻灯片)。他们中的一些人也有iframes
。就像上面的测试一样,内存泄漏(没那么快,但几天之内),铬浏览器标签崩溃了,显示他死了吉姆笑脸。
下面是测试的代码:
<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
)上注意到相同的内存泄漏src
属性可以设置为任何URL。有什么办法防止这件事吗?
到目前为止,我只考虑每隔几分钟刷新浏览器选项卡。这将是一个棘手的解决方案,因为它没有解决问题的根源。当我想在我的Vue应用程序中显示另一个网站内容时,除了使用iframes
之外,还有其他选择吗?有没有办法在不留下任何东西的情况下清理整个iframe
?
更新2021/02/25
我现在也尝试了边缘浏览器,同样的结果(增加内存超时)。我也尝试过Firefox私有模式,只产生了很低的影响(增加内存,但速度有点慢)。比较了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();
同样的结果,快速增加了记忆。
发布于 2021-02-15 17:13:28
首先,关于iframe
如何在browser - 分离窗口内存泄漏中工作的一些理论。
iframe
中,并使该数据保持活动状态。当我在Chrome中分析您的例子时,仅仅切换到隐匿模式就会导致内存分配和保留量的大幅度减少。更新:我在我的开发机器(Ryzen 5 3600,32G内存,Win 10 x64)上使用您的示例(使用1s间隔而不是2s)运行一些测试-- serve-handler
加载到Firefox版本v86.0b9 (64位)专用窗口(因此没有任何类型的扩展)提供的生产构建。
Record call stacks
选项)。在开始时记录了一张快照,在大约40分钟后又记录了一张。比较这些快照,没有显示任何JS堆分配的增加。浏览器的私有字节(使用Sysinternals )显示增加了大约60 to,但是当我关闭Dev工具时,内存被清除了,所以可以肯定地说它是Dev工具使用的内存。因此,我的结论是,没有与iframe
或Vue本身关联的内存泄漏。如果你真的看到像“在几分钟内我的可用内存被88 %使用”这样的戏剧性的事情,你应该检查你自己的系统,特别是在浏览器中安装的扩展.
https://stackoverflow.com/questions/66144115
复制相似问题