如何删除 JavaScript 画布渲染上下文的状态堆栈？

Question

我最近在 JavaScript 中使用 <canvas>，并发现可能会造成非常糟糕的“内存泄漏”（更像是内存爆炸）。使用画布上下文时，您可以使用context.save() 将绘图样式添加到“状态堆栈”，并使用context.restore() 将其删除。 （见the documentation for the rendering context on MDN。）

当您碰巧连续保存到状态堆栈而不恢复时，就会出现问题。在 Chrome v50 和 Firefox v45 中，这似乎只是占用了越来越多的私有内存，最终导致浏览器选项卡崩溃。 （顺便说一下，JavaScript 内存在 Chrome 中不受影响，因此很难使用分析器/时间线工具进行调试。）

我的问题：如何清除或删除画布上下文的状态堆栈？ 使用普通数组，您可以检查length，用@987654326 修剪它@ 或简单地重置为空[]，但我还没有看到用状态堆栈执行任何此操作的方法。

Answer 1

[I].. 发现了造成非常糟糕的“内存泄漏”的可能性

这在技术上不是内存泄漏。泄漏将是分配内存并释放指向它的指针，因此无法释放它。在这种情况下，指针被跟踪但内存没有被释放。

当您碰巧连续保存到状态堆栈而不恢复时会出现问题。

这是意料之中的。分配内存而不释放它会累积分配的内存块。

如何清除或删除画布上下文的状态堆栈？

唯一的方法是要么恢复所有保存的状态，要么通过为画布元素设置一些大小来重置上下文（即canvas.width = canvas.width）。

调用restore() 的次数也比调用save() 的次数多（在这种情况下，它只是返回而不做任何事情），所以理论上你可以通过n 迭代次数的循环运行它。不过，后者更属于不良做法。

但话虽如此：如果保存和恢复的数量在假设相等时不匹配，通常表明代码中的其他地方存在问题。通过重置或在后期运行多次恢复来解决问题可能只会掩盖实际问题。

这是一个关于如何跟踪保存/恢复调用计数的示例 -

// NOTE: this code needs to run before a canvas context is created
CanvasRenderingContext2D.prototype.__save = CanvasRenderingContext2D.prototype.save;
CanvasRenderingContext2D.prototype.__restore = CanvasRenderingContext2D.prototype.restore;

// Our patch vectors
CanvasRenderingContext2D.prototype.__tracker = 0;
CanvasRenderingContext2D.prototype.save = function() {
  this.__tracker++;
  console.log("Track save:", this.__tracker);
  this.__save() 
}

CanvasRenderingContext2D.prototype.restore = function() {
  this.__tracker--;
  console.log("Track restore:", this.__tracker);
  this.__restore() 
}

// custom method to dump status
CanvasRenderingContext2D.prototype.trackstat = function() {
  if (this.__tracker)
    console.warn("Track stat:", this.__tracker);
  else
    console.log("Track stat: OK");
}

var ctx = document.createElement("canvas").getContext("2d");
ctx.save();                     // do a couple of save()s
ctx.save();
ctx.restore();                  // single restore()
ctx.trackstat();                // should report mismatch of 1
ctx.restore();                  // last restore()
ctx.trackstat();                // should report OK