Question

我正在处理ProcessingJS可视化，我注意到当用户选择canvas元素时性能会明显下降。

不幸的是，我只在本地工作，所以我无法发送实际页面的链接，但这是10秒screen cast of the behavior。

当页面加载并且未选择画布时，草图似乎以合理的速度呈现。但是，如果单击画布元素的黑色背景，则草图开始绘制速度明显变慢。单击其他位置（如浏览器外部）或在URL栏中单击以从canvas元素中取出焦点可将性能提升回页面加载时的性能。

所以有两个问题：

1）为什么会这样？

2）有没有办法防止这种情况发生？我想通过阻止用户完全聚焦canvas元素，但是对任何建议都是开放的。

我已尝试过这些回复question1，question2，以禁用用户对画布的选择，但没有任何运气。

谢谢！

Answer 1

在浪费了一些ProcessingJS团队的宝贵时间后，您可以在链接的ticket下查看，他们发现错误与我的HTML文件有关。

将HTML文件放在一起时，我一直很懒，并省略了标题元素，所以它看起来像这样：

<script src="processing.js"></script>
<canvas id="graph_canvas" data-processing-sources="Main.pde ....">
</canvas>

正如ProcessingJS团队指出的那样，实际上并不是一个有效的HTML文件（根本没有），因为它缺少<head><body>等元素。

无论出于何种原因，格式不正确的HTML文件导致上述屏幕截图中显示的行为。一旦我添加了所有正常的必需元素，浏览器的性能就会很好，画布会聚焦或不聚焦。

Answer 2

这很有趣，值得向我们提交错误（processing.js）。你能做到这一点，和/或在irc.mozilla.org/processing.js上找到我们吗？我们应该弄清楚为什么会这样。