javascript putImageData 比 drawImage 快吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7721898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is putImageData faster than drawImage?
提问by user802232
I think putImageData is faster than drawImage, but I need to prove it.
我认为 putImageData 比 drawImage 快，但我需要证明这一点。
I guess it is the same case as with Flash and its Bitmap and BitmapData classes. Basically, BitmapData facilitates a non-visual extraction of the data in a Bitmap object, which allows for very easy and fast manipulation of it.
我想这与 Flash 及其 Bitmap 和 BitmapData 类的情况相同。基本上，BitmapData 促进了 Bitmap 对象中数据的非可视化提取，这允许对其进行非常简单和快速的操作。
I'm guessing that in high-performance cases, such as games, extracting the ImageData from every image (for instance, every sprite) and caching it in an "assets" dictionary is a better solution than drawing the sprites themselves onto the canvas over and over again.
我猜在高性能情况下，例如游戏，从每个图像（例如，每个精灵）中提取 ImageData 并将其缓存在“资产”字典中是比将精灵本身绘制到画布上更好的解决方案并重新开始。
Could someone prove this?
有人能证明这一点吗？
回答by Xenethyl
I take no credit for putting this test together, but you can clearly see the performance of using drawImage()with both a canvas and an image as well as the performance of putImageData()here:
我不认为将这个测试放在一起，但是您可以清楚地看到使用drawImage()画布和图像的性能以及putImageData()这里的性能：
http://jsperf.com/canvas-drawimage-vs-putimagedata/3
http://jsperf.com/canvas-drawimage-vs-putimagedata/3
As of right now, drawImage()is much faster than putImageData(). Last I heard, this was not intended and the browser developers were looking into improving the performance gap.
截至目前，drawImage()比putImageData(). 最后我听说，这不是故意的，浏览器开发人员正在研究改善性能差距。
回答by floatingice
For larger canvases I found that it didn't make as much of a difference, but putImageData is definitely not as performant as drawImage for copying canvases.
对于较大的画布，我发现它没有太大的区别，但 putImageData 绝对不如 drawImage 复制画布的性能。
Here are some test cases I used: http://jsperf.com/canvas-size-test-case/3
以下是我使用的一些测试用例：http: //jsperf.com/canvas-size-test-case/3
I did end up having some performance problems with overall source canvas size, regardless of the size of data I'm actually copying.
无论我实际复制的数据大小如何，我最终确实在整体源画布大小方面遇到了一些性能问题。
