Question

上下文

parent.html ，其中包含两个具有以下角色的按钮：

加载到iframe另一个文档（child.html）。
卸载子文档。

child.html 有一个脚本可以创建 n 个节点并将字符串推送到数组中（以示例一段时间内的内存使用情况）。

示例代码

parent.html ：

<html>
<head></head>
<body>
  <button onclick="loadGame()">Load</button>
  <button onclick="unloadGame()">Unload</button>
  <div class="loader"></div>
  <script>
    var loadGame, unloadGame;

    loadGame = function() {
      var iframe = document.createElement('iframe');
      iframe.className = 'loader--iframe';
      iframe.src = 'child.html';
      document.querySelector('.loader').appendChild(iframe);
    };
    unloadGame = function() {
      document.querySelector('.loader')
        .removeChild(document.querySelector('.loader--iframe'));
    };
 </script>
 </body>
 </html>

child.html

<html>
<head></head>
<body>
  <p>Loaded Content</p>
  <script>
    (function(){
      var i, el = null,
        x = [];

      for (i = 0; i < 10000; i++) {
        el = document.createElement('div');
        el.innerHTML = 'node ' + i;
        document.body.appendChild(el);
      }
      x.push(new Array(1000000).join('x'));
    })()
  </script>
</body>
</html>

在主持人身上轻松测试它还有一个要点：

git clone https://gist.github.com/am/b7c7c762e9064dc9c7fc93e13eb8c0a9
cd b7c7c762e9064dc9c7fc93e13eb8c0a9
bash run.sh

问题

加载和卸载几次后，使用chrome-devtools性能＆gt;内存记录，我看到内存，文档和节点没有完全清理：

开始：

JS Heap：3 857 912
文件：2
节点：22

结束：

JS Heap：5 908 928
文件：4
节点：21 672

注意：测试是在没有加载扩展程序的情况下使用隐身浏览器窗口运行的。

期望

我正在尝试找到一种方法将html内容加载到页面中，但在某些时候能够卸载内容，确保该子项所占用的所有内存也被释放。所以主要的疑问是：

这是预期的浏览器行为吗？
有没有办法完全删除子节点，文档和内存分配？

从加载的iframe中删除节点

上下文

示例代码

问题

期望

0 个答案: