Question

我正在测试 src 模板内 <iframe> 的 Vue 属性的动态变化。在测试中，我每秒更改一次 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）上注意到相同的内存泄漏
在 Vue 的开发 (HMR) 和生产构建期间注意到相同的内存泄漏。单独的 Vue 应用程序。
我不知道 iframe 的内容，它可以是任何内容，因为 src 属性可以设置为任何 URL。

有什么防止这种情况的想法吗？

到目前为止，我只考虑过每隔几分钟刷新一次浏览器选项卡。这将是一种hacky 解决方案，因为它没有解决问题的根源。当我想在我的 Vue 应用程序中显示另一个网站内容时，有没有其他方法可以使用 iframes ？有没有办法只清理整个 iframe 而不留下任何东西？

更新 2021/02/25

我现在也尝试了 Edge Browser，结果相同（增加内存超时）。我还尝试了 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();

相同的结果，快速增加内存。

Answer 1

首先，一些关于 iframe 如何在浏览器中工作的理论 - Detached window memory leaks

当您尝试调试内存泄漏时，请始终使用“隐身模式” - 当浏览器不使用任何扩展时的模式。扩展可能会保留对加载到 iframe 中的 HTML 的引用并保持该数据处于活动状态。当我在 Chrome 中分析你的例子时，只是切换到隐身模式会导致内存分配和保留的大量减少......
不要使用 Vue CLI/Webpack 开发模式来调试内存泄漏。 Webpack 的热模块重载 (HMR) 会影响内存中保存的内容。始终为此使用生产版本...
请注意，JS 运行时（本例中为 V8）会收集有关正在执行的代码和 keep it in the JS heap 的一些元数据。看起来像内存泄漏的可能只是JS虚拟机元数据...

更新：我在我的开发机器（Ryzen 5 3600、32G 内存、Win 10 x64）上使用您的示例（间隔为 1 秒而不是 2 秒）运行了一些测试 - serve-handler 提供的生产版本已加载到 Firefox 开发人员版 v86 .0b9（64 位）私有窗口（所以没有任何类型的扩展）

首先打开开发工具并打开内存分析（打开 Record call stacks 选项）。开始时记录一张快照，大约 40 分钟后再记录一张。比较这些快照没有显示任何 JS 堆分配增加。浏览器的私有字节（使用 Sysinternals Process Explorer）显示增加了大约 60MB，但在我关闭开发工具的那一刻内存被清除，所以可以肯定地说这是开发工具使用的内存
同样的例子，现在不打开开发工具 - 运行 40 分钟。再次没有任何内存增加...

所以我的结论是没有与 iframe 或 Vue 本身相关的内存泄漏。如果你真的看到像“几分钟内我的可用内存被 88% 使用”这样的戏剧性事件，你应该检查你自己的系统，尤其是浏览器中安装的扩展......

动态 iframe src 更改导致内存泄漏

事实

有什么防止这种情况的想法吗？

更新 2021/02/25

1 个答案: