缺少括号会导致 Firefox 上的 JavaScript 运行速度极慢答案

【问题标题】：Missing parenthesis cause JavaScript on Firefox to run extremely slow缺少括号会导致 Firefox 上的 JavaScript 运行速度极慢
【发布时间】：2017-11-16 09:12:49
【问题描述】：

所以我一直在做一个项目，突然间我的动画和一切都会运行得非常慢。甚至我的 Timeout 也落后了数百毫秒。现在我找到了造成这种情况的原因，但我想知道是为什么？

这是我的原始代码：

  ctx.save();
  ctx.beginPath();
  ctx.arc(c.width / 2, - 7.5, c.width / 2, 0, Math.PI * 2, false);
  ctx.clip();
  ctx.beginPath();

  // Mark out some path

  ctx.stroke();
  ctx.restore;

然后我发现restore后面的括号不见了：

  ctx.save();
  ctx.beginPath();
  ctx.arc(c.width / 2, - 7.5, c.width / 2, 0, Math.PI * 2, false);
  ctx.clip();
  ctx.beginPath();

  // Mark out some path

  ctx.stroke();
  ctx.restore();

现在它就像一个魅力一样神奇地发挥作用。有人知道为什么吗？我在 chrome 中没有遇到问题，我使用的是 firefox 版本 53.0.3（32 位）。

哦，顺便说一句，我正在播放一个带有很多过滤器的 AoudioBufferedSourceNode，尽管它一直在正常播放。

【问题讨论】：

它从未在您的第一段代码中执行恢复
ctx.save() 保存画布的当前旋转和坐标。 ctx.restore() 将画布移动到上次保存的旋转和坐标。您实际上并没有移动画布，从而使操作变得多余，但它仍然必须计算答案，这需要计算能力，这需要时间。

标签： javascript performance animation canvas html5-canvas

【解决方案1】：

您的原始代码从未恢复画布状态，因此您的状态堆栈一直在增长。毫不奇怪，这最终会使事情陷入困境。 ctx.restore 实际上是一个无操作，它并没有真正做任何事情*。 ctx.restore() 调用ctx 上的restore 方法。

* （它评估ctx 的当前值，然后尝试查找其上的restore 属性...然后丢弃它获得的值[函数引用]，而不是使用所以它不是一个空操作，因为如果[例如]ctx 是null 或undefined，它会抛出一个错误，但它没有做任何有用的事情。） p>

【讨论】：

有道理，谢谢。知道为什么这只在 Firefox 上吗？
@AramBecker：对于不断增长的状态堆栈具有不同容差的不同实现是我能想到的。