页面重新加载时由 <canvas/> 分配的空闲内存答案

【问题标题】：Free allocated by <canvas/> memory on page reload页面重新加载时由 <canvas/> 分配的空闲内存
【发布时间】：2013-02-18 07:16:36
【问题描述】：

在下面的示例中，如何释放

<html>
  <head>
  </head>
  <body id="body">
    <canvas id="canvas" width=3000 height=2000/>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillText("hao ar iu?", 20, 20);
    </script>
  </body>
</html>

我尝试将 var canvas 设置为 null（canvas = null），删除画布（删除画布）或动态创建画布并将其附加到“文档”根目录，删除后方式：

<div onclick=reload()>CLICK TO RELOAD PAGE</div>
<script>
  function reload(){
    body.removeChild(canvas);
    location.reload();
  }
</script>

没有任何变化，分配的内存随着每一个页面的重新加载而变得越来越大，直到我的浏览器占用过多的 CPU RAM 内存。有时浏览器会崩溃。有时垃圾收集器会清除范围之外的一些变量。但它让太多的内存被占用。我使用 Chrome 版本 25。有什么方法可以释放

【问题讨论】：

标签： javascript html memory-leaks

【解决方案1】：

你试过 JavaScript 操作符 delete 吗？

delete canvas;

否则你可以试试这个对我有用的：

canvas.parentNode.removeChild(canvas);

您需要确保删除对画布的所有引用，即使是 DOM 或任何其他对象的引用，以避免内存泄漏。

PS：忘了说你的画布尺寸很大。使画布尽可能小，以减少内存使用并提高 fps。

PS2：关闭路径将有助于避免内存泄漏

【讨论】：

是的，我确实尝试了您列出的所有解决方案，您可以在我的帖子中看到。它们似乎对我来说都不可靠。 “关闭路径”是什么意思？我不绘制动画，所以在我的情况下，大尺寸不会影响性能。
这不是 delete 的用途。