时间戳

首页 > 解决方案 > 动态 iframe src 更改导致内存泄漏

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

问题描述

我正在测试模板内部src属性的动态变化。在测试中，我每秒更改一次 src。在几分钟之内，我的可用内存被 88% 使用，最终计算机最终死机。我在具有 32 GB 内存和 Firefox 浏览器的 Windows 10 机器上执行了此测试。<iframe>Vue

但是，我首先注意到在使用 chromium-browser 的 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>

事实

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

到目前为止，我只想每隔几分钟刷新一次浏览器选项卡。这将是一种 hacky 解决方案，因为它没有解决问题的根源。iframes当我想在我的 Vue 应用程序中显示其他网站内容时，是否有任何替代方法可以使用？有没有办法清理整个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();

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

标签： javascriptvue.jsmemory-leaks

解决方案

首先，关于浏览器如何iframe工作的一些理论 -分离窗口内存泄漏

  1. 当您尝试调试内存泄漏时，请始终使用“隐身模式” - 当浏览器不使用任何扩展时的模式。扩展可以保持对加载到 a 中的 HTML 的引用iframe并保持该数据处于活动状态。当我在 Chrome 中分析您的示例时，只是切换到隐身模式会导致内存分配和保留的巨大减少......

  2. 不要使用 Vue CLI/Webpack 开发模式来调试内存泄漏。Webpack 的热模块重载 (HMR) 会影响内存中保存的内容。始终为此使用生产版本...

  3. 请注意，JS 运行时（在本例中为 V8）收集有关正在执行的代码的一些元数据并将其保存在 JS heap中。看起来像内存泄漏的可能只是 JS 虚拟机元数据......

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

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

  2. 相同的示例，现在无需打开开发工具 - 运行 40 分钟。再次没有任何内存增加......

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

推荐阅读