动态iframe src更改会导致内存泄漏。
我正在测试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)上注意到相同的内存泄漏 - 在开发(HMR)和从Vue构建产品时注意到相同的内存泄漏。不过，分开Vue应用程序。
- iframe的内容对我来说是未知的，可能是任何内容，因为
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();同样的结果，快速增加了记忆。
Stack Overflow用户
发布于 2021-02-15 17:13:28
首先，关于iframe如何在browser - 分离窗口内存泄漏中工作的一些理论。
- 当您试图调试内存泄漏时，当浏览器是时，始终使用“隐名模式”--当浏览器不使用任何扩展时。扩展可以将对HTML的引用加载到
iframe中，并使该数据保持活动状态。当我在Chrome中分析您的例子时，仅仅切换到隐匿模式就会导致内存分配和保留量的大幅度减少。 - 不要使用Vue CLI/Webpack dev模式来调试内存泄漏。Webpack的热模块重装(HMR)会影响内存中保存的内容。总是用生产制造来实现..。
- 请注意，JS运行时(本例中为V8)收集有关正在执行的代码和将其保存在JS堆中的一些元数据。看起来像是内存泄漏可能只是JS虚拟机元数据..。
更新:我在我的开发机器(Ryzen 5 3600，32G内存，Win 10 x64)上使用您的示例(使用1s间隔而不是2s)运行一些测试-- serve-handler加载到Firefox版本v86.0b9 (64位)专用窗口(因此没有任何类型的扩展)提供的生产构建。
- 首先，打开Dev工具，打开内存分析(打开
Record call stacks选项)。在开始时记录了一张快照，在大约40分钟后又记录了一张。比较这些快照，没有显示任何JS堆分配的增加。浏览器的私有字节(使用Sysinternals )显示增加了大约60 to，但是当我关闭Dev工具时，内存被清除了，所以可以肯定地说它是Dev工具使用的内存。 - 同样的例子，现在没有打开开发工具-运行40分钟。再一次没有增加记忆..。
因此，我的结论是，没有与iframe或Vue本身关联的内存泄漏。如果你真的看到像“在几分钟内我的可用内存被88 %使用”这样的戏剧性的事情，你应该检查你自己的系统，特别是在浏览器中安装的扩展.
https://stackoverflow.com/questions/66144115
复制相似问题
腾讯云开发者
