Windows 7上IE 9中的HTML 5 Canvas性能

Question

这是一个HTML 5 Canvas应用程序。 这是一个非常标准的“设计器”应用程序，用户可以在其中将对象添加到布局，四处移动并编辑其属性。

它工作得很好，但事实证明它在Windows 7的IE 9中确实存在性能问题。

• 操作通常需要10秒，而不是通常的2秒。

• 同样，在使用该应用程序一段时间后，浏览器会显示一条错误消息，指示主机“未响应”，并提供选项“恢复网页”和“ X”。一旦发生这种情况，它将对每个用户操作（包括“文件”菜单和我只能通过编辑URL位置文本来摆脱它。 特别是，在尝试使用开发人员工具中的浏览器分析器时，通常会发生这种情况。 这显然令人沮丧，但这也可能是一个线索。 我想知道是否会出现此错误消息所建议的同步AJAX同步调用，但是使用开发人员工具捕获网络流量表明所有调用均已完成。

• 该问题似乎特定于浏览器和OS的这种组合。 Windows Server 2008上的IE 9表现正常，Windows 7上的Firefox和Chrome也表现正常。对于32位或64位IE，问题是相同的。

• 这些操作大多数还具有服务器端组件。 例如，添加文本对象会进行AJAX调用，以为该对象提供图像。 服务器API是作为小型TurboGears应用程序实现的，该应用程序使用ImageMagick进行图像处理。 但是粗略的分析表明，服务器端没有发生任何异常情况。 这表明问题确实出在JavaScript中。

• 当应用程序运行时，任务管理器显示浏览器使用90％或更高的CPU。 这适用于所有浏览器，而不仅限于IE9。这可能是因为应用程序中的渲染循环很紧，所以我们不得不想到的一个想法是减少重新绘制画布的次数。 不幸的是，这似乎没有帮助。 requestAnimationFrame似乎是个好主意，但IE 9不支持。

• 一位同事建议使用Google Chrome浏览器内嵌框架插件可能会有所帮助。 这可能是一个可以接受的解决方案，但是我还没有尝试过。

• 我发现一些建议打开“控制面板”选项“使用软件渲染而不是GPU渲染”，但这似乎无济于事。

Answer 1

我注意到的一件事：如果在文档中没有它的情况下开始在IE上进行绘制，似乎IE中的画布要慢得多。

因此，我在绘制之前会执行document.body.appendChild(canvasEl) 。 您甚至可以使canvas元素dislay: none; 但至少它应该在体内。

更新：对于Chrome和Firefox，将画布附加到正文的速度似乎较慢。 因此，如果您不需要将其添加到正文中，请不要为Chrome和Firefox添加它。