【发布时间】：2012-08-06 13:14:19
【问题描述】：
我在使用 HTML5 进行屏幕外渲染时遇到了一些真正的困难！ 我编写的代码在 Firefox 上运行得非常好，在画布元素上使用 drawImage 可以绘制平滑的图像并且速度非常快。
但是，使用 Chrome 21，drawImage 的性能非常糟糕。我看不出哪里出错了。
这是一个带有一些示例代码的 jsfiddle： http://jsfiddle.net/DXgum/3/
在 Firefox 中，我可以获得大约 60fps，chrome 只能提供 10fps 的帧速率。 如果我使用 in-dom 画布元素或 not-in-dom，性能没有差异。
在 Chrome 上无缓冲渲染比 Firefox 快，所以我实际上不确定为什么 Chrome 会出现这样的 drawImage 问题。
对此事的任何帮助或启发将不胜感激！
系统信息：
- Windows 7 32 位
- 英特尔 QX9650
- 英伟达 GTS 250
- 4GB DDR2 内存
- Chrome 版本：21.0.1180.60 m
- 火狐版本：14.0.1
【问题讨论】：
-
我在 Safari 6、MBP (Core I7 2.4 MHz) OSX 10.7.4 上进行了测试，得到了 125 - 149 fps。您确定问题出在
drawImage函数而不是Math的东西吗？如果在 chrome 上绘图本身速度更快，那么可能是其他原因阻碍了性能。尝试使用网络检查器并做一个 JavaScript 示例或渲染，看看它卡在哪里。 -
您好，感谢您抽出宝贵时间查看。不幸的是，我很确定它是 drawImage 方法，我按照你的建议做了，并从循环中删除了所有不需要的东西。这是带有更新代码的 jsfiddle：jsfiddle.net/DXgum/10 有趣的是，如果我减小画布的大小（到 100,100），Chrome 现在会以 142fps 的速度渲染图像：jsfiddle.net/DXgum/11 所以它必须以某种方式在每个 drawImage 上渲染整个画布打电话？我不明白。
-
实际上，任何超过 256x256 的主画布尺寸的性能都很差。那么这是否与 GPU 加速有关？
-
我 changed a small bit 现在获得 250fps。也许罪魁祸首是您保存了
contextx1000，然后使用objects[i].context，而在drawImage方法中使用它之前必须对其进行渲染。这只是一个疯狂的猜测，但可能值得一试。 -
您可以尝试使用屏幕外缓冲区画布。尝试绘制到不在 DOM 中的画布中，然后对实际画布上的整个缓冲区使用一次绘制图像。调用
drawIamge必须至少在内部触发渲染，因为它需要重新计算像素值。现在的问题是，是渲染有问题还是 Chrome 正在将像素推送到屏幕上。还有什么我不知道的。
标签： performance html canvas rendering drawimage