Performance HTML5 drawImage在Chrome上运行缓慢

我在使用HTML5进行屏幕外渲染时遇到了一些真正的困难！ 我编写的代码在Firefox上运行得非常好，使用画布上的drawImage元素可以绘制平滑的图像，而且速度非常快

然而，使用Chrome21，drawImage的性能非常糟糕。我看不出我错在哪里

下面是一个带有一些示例代码的JSFIDLE：

在Firefox中，我可以获得约60fps的帧速率，chrome只能提供10fps的帧速率。 如果我在dom画布元素中使用或不在dom中使用，性能不会有所不同

在Chrome上没有缓冲的渲染速度比Firefox快，所以我不确定Chrome为什么会在drawImage上出现这样的问题

如果您能提供任何帮助或帮助，我们将不胜感激

系统信息：

• Windows 7 32位
• 英特尔QX9650
• 英伟达GTS 250
• 4GB DDR2 RAM
• Chrome版本：21.0.1180.60 m
• Firefox版本：14.0.1

---

多年来，我一直在努力解决这个问题。chrome的一个版本很好，下一个版本又慢了。。。我的最终解决方案有点老套，但它是有效的

---

通过使用您的小提琴，我可以确定如果画布的大小是我在Safari 6、MBP（Core I7 2.4 MHz）OSX 10.7.4上测试过的，并且获得了125-149 fps，那么性能肯定会大幅下降。你确定问题出在

drawImage

函数上，而不是

Math

之类的东西吗？如果在chrome上绘图本身速度更快，那么可能还有其他东西在妨碍性能。尝试使用web inspector，并对JavaScript或渲染进行示例，以查看它被卡住的位置。嘿，感谢您抽出时间进行检查。不幸的是，我很确定这是drawImage方法，我按照你的建议做了，并从循环中删除了所有不需要的内容。下面是更新代码的JSFIDLE：有趣的是，如果我减小画布的大小（到100100），Chrome现在以142fps的速度渲染图像：所以它一定是在每次drawImage调用中渲染整个画布？我不明白。实际上，主画布的大小超过256x256都会有很差的性能。这可能和GPU的加速有关吗？我现在得到了250fps。罪魁祸首可能是您保存了

context

x1000，然后使用

objects[i].context

，在

drawImage

方法中使用之前，必须先渲染这些对象。这只是一个猜测，但可能值得一试。您可以尝试使用屏幕外缓冲区画布。尝试在不在DOM中的画布上绘制，然后对实际画布上的整个缓冲区使用“绘制图像”一次。调用

drawIamge

必须触发渲染，至少在内部，因为它需要重新计算像素值。现在的问题是，是渲染有问题，还是Chrome将像素推到了屏幕上。我不知道还有什么。