2

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

它工作得很好，但事实证明在 Windows 7 上的 IE 9 中存在真正的性能问题。我将不胜感激！

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

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

  • 该问题似乎特定于浏览器和操作系统的这种组合。Windows Server 2008 上的 IE 9 运行良好，Windows 7 上的 Firefox 和 Chrome 也正常运行。32 位或 64 位 IE 的问题相同。

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

  • 当应用程序运行时，任务管理器显示浏览器使用 90% 或更多的 CPU。对于任何浏览器都是如此，而不仅仅是 IE 9。这可能是因为应用程序中的渲染循环很紧凑，所以我们的一个想法是减少重新绘制画布的频率。不幸的是，这似乎没有帮助。requestAnimationFrame 似乎是个好主意，但在 IE 9 中不受支持。

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

  • 我找到了一些建议来打开控制面板选项“使用软件渲染而不是 GPU 渲染”，但这似乎没有帮助。

4

1 回答 1

0

我注意到的一件事：如果你在它不在文档中时开始在它上面绘图，那么 IE 中的画布似乎要慢得多。

所以我document.body.appendChild(canvasEl)在画画之前会这样做。你甚至可以制作画布元素dislay: none;，但至少它应该在正文中。

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

于 2013-09-11T14:37:13.320 回答