Javascript 为什么在画布上填充矩形会慢慢降低性能？

我目前正在开发一款HTML5游戏，它利用了

元素。随着时间的推移，我神秘地经历了程序性能的下降，我希望你能解释一下这种行为

我将问题追溯到一个函数，该函数绘制了每一帧的背景。其要点如下：

function paintBackground() {
  ctx.rect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = "black"
  ctx.fill()
}

我还设置了一个表示此场景的

这段代码的有趣之处在于，当进行测量时，它的效率会慢慢降低几个数量级。以JSFIDLE为例，它以不到一毫秒的时间完成函数开始。大约2-3秒后，它报告现在需要1毫秒。大约10秒后，现在平均为2-3毫秒。在一分钟内，它的平均值约为6-7毫秒，当我让它运行大约5分钟时，它的平均值高达13-14毫秒。这比开始时慢了数百%，没有任何变化！我在IE 11和Firefox 35.0.1中测试了相同的代码。两者都显示出相同的降级，但在Firefox中似乎下降得更快一些

现在，我不是一个对微优化大惊小怪的人，但我的目标是达到稳定的60FPS，这意味着我只有约16.67ms的渲染和更新时间，而仅仅通过渲染背景，我基本上就逐渐失去了一半！我还担心这可能是一列失控的火车，谁知道性能会有多差；可能使我的游戏无法播放

据我所知，这是导致性能下降的唯一因素，原因有两个：1）游戏代码的其余部分运行平稳，包括渲染构成关卡的所有平铺（每帧375+平铺），2）我甚至在提供的JSFIDLE中也经历过这种行为，它只包含矩形填充

任何关于这种行为的解释或建议都会很有启发性

我知道这听起来很愚蠢，但还有其他人有过这种行为吗？还是只有我？不过我应该注意，我的CPU速度很慢（1.4ghz双核），这一点很明显。

命令将添加到路径并累加，因此每次调用

fill（）

之前的所有rect都会被填充

通过以下两种方式之一解决：

function paintBackground() {
  ctx.beginPath(); // RESET path here
  ctx.rect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "black";
  ctx.fill();
}

或不使用路径直接填充：

function paintBackground() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

还可以使用requestAnimationFrame获得更好的动画效果

---

Ps：别忘了半列。

确认在IE11和Firefox中会降级，但在Chrome中不会。