javascript - 为什么在许多浏览器中，drawImage()的性能比createPattern()略好/明显好？

在查找如何在<canvas>上绘制重复的图像背景时(是的，我是<canvas>的新手)，我看到有两种方法可以做到:

在drawImage()循环中使用for在<canvas>上手动重复图像

使用context.createPattern()创建一个模式，将<canvas>的fillStyle设置为该模式，然后使用fillRect在整个<canvas>上绘制一个包含该模式的矩形。

显然，我要做的第一件事是创建一个JSPerf测试，以查看哪种测试速度更快(“Premature Optimisation™-它有效”):

http://jsperf.com/createpattern-vs-drawimage

看起来drawImage()方式往往胜过createPattern()方式，尽管这种差异在最近的浏览器中有所减少，并且在最近的浏览器中似乎消失了。

我希望createPattern()方式更快。我以为createPattern()基本上会和手动drawImage()方法做同样的事情，但是内置的话，这样做会更快。

有什么想法为什么createPattern()方法比较慢？ createPattern()是否除了在所应用的形状上反复绘制图案图像以外，还可以做其他事情？我在编写测试时是否犯了一个错误？

最佳答案

经过一些测试，我得到了相反的结果。

您进行性能测试的方式有些奇怪。我对其进行了归一化，并将javascript代码从安装程序移到了准备阶段(应该在该位置)

http://jsperf.com/createpattern-vs-drawimage/2

填充图案似乎比chrome，IE，Firefox(略)，移动chrome(银河系)，iPad Safari浏览器中的循环drawImage更快。

此外，简单地制作图案(将fillRect与图案一起使用或以其他方式使用)并将其缓存到屏幕外的 Canvas 上，然后从该 Canvas 上绘图就应该差不多快。这两种方法都应该比使用循环多次调用drawImage更快。我在测试中添加了第三种方式作为第三段。

此外，重复图像的次数越多，模式或缓存的模式的好处应该大大增加。例如，请参见此处:

http://jsperf.com/createpattern-vs-drawimage/3

在其中绘制图像数百次会导致createPattern的效率比drawimage循环高100-200倍