为什么这个 HTML5 应用程序的性能在坐标加载时会下降答案

【问题标题】：Why does the performance of this HTML5 app drop upon coordinate load为什么这个 HTML5 应用程序的性能在坐标加载时会下降
【发布时间】：2013-06-08 02:12:10
【问题描述】：

我用 HTML5 编写了这个 Mandelbrot plotter，它有一个我无法解决的可重现的性能错误。

在绘图控件部分，可以将坐标保存到选择列表中，以便稍后直接返回。但是，如果我选择一组已保存的坐标，然后单击“加载”，性能突然变得如此缓慢，以至于起初我以为它正在挂起脚本（它最终会开始按预期的方式显影图像）。

我不知道为什么。加载按钮的 onclick 处理程序（第 258 行）只需调用 gotoCoord()（第 457 行）。 gotoCoord 函数只需设置几个绘图参数（xOff、yOff、fMag），然后调用 initDisplay()。我在其他几个没有不良影响的地方做了这些确切的事情（第 124 行的 mousedown，第 386 行的 zoomOut，第 394 行的 zoomIn）。我不知道 gotoCoord 有什么不同。

我已经进行了反复的比较测试，导航到一个绘图并计算开发图像所需的时间。然后我保存坐标并加载它们。对性能的影响是巨大的。

有其他人看到我错过了什么吗？

【问题讨论】：

1 毫秒的 setInterval 是错误的。考虑改用requestAnimationFrame。如果在initDisplay 之前将加载的值转换为正确的数字（例如xOff = +xOff），看看性能是否会提高。
就是这样！！从 localStorage 加载后是文本！（呃）谢谢！至于间隔，帧处理大约需要10-15毫秒。但是在查看堆栈跟踪后，我注意到帧没有排队；一次只有一个正在处理。所以，我想为什么不让下一个尽快开始呢？再次感谢！
@Allen 你正在混合 setInterval 和 setTimeout。 setInterval 不在乎，它会尝试每 1 毫秒运行一次。调用 setTimeout 时，将等待额外的 1 毫秒。正如 DCoder 所建议的，requestAnimationFrame 是一个更好的解决方案。它在 your 计算机上使用 10-15ms 并不意味着它会在其他人的计算机上使用 :) requestAnimationFrame 同步到监视器的 VBLANK，因此在 all 上会更好地工作电脑。

标签： javascript html performance html5-canvas

【解决方案1】：

此问题已回答，因此只需将其从未回答列表中删除即可。

@DCoder 的评论解决了这个问题。绘图参数存储在 localStorage 中，然后从那里加载选择列表。当然，从 localStorage 加载时，值都是字符串。这就是 gotoCoord 与其他函数的不同之处。由于绘图中使用了参数（第 589 和 590 行），因此对于每帧中每个像素的每次计算，都必须将文本转换为数字！

三个小加号修复了它。

【讨论】：