为什么drawImage在Safari中的执行速度比Chrome或Firefox快得多？

Question

我做了一个小小的HTML canvas可视化工具，很有趣，并且我注意到它在Chrome中运行非常糟糕，在Firefox中非常糟糕，但是在Safari（包括iPhone和iPad）中绝对令人惊讶！

谁能解释为什么？

我认为代码应该相当简单，但是基本上我是在为鼠标（或触摸）位置绘制点，然后使用drawImage将画布复制到临时画布。 从那里我清除了显示画布，然后将临时画布复制回了4次，但是应用了诸如drawing，旋转，偏移，透明度和缩放（以及使用一些不同的globalCompositeOperations）之类的一些东西。 因此，总共，在每个循环中drawImage被调用5次。

您可以在此处查看演示： http : //lakenen.com/vis.html

任何见解将不胜感激！

PS。 如果可以，请在iPad上尝试； 多点触控非常简洁:)

Answer 1

由于性能分析器在Safari和Chrome中几乎相同，因此您应该可以自行确定。 您的演示可以在我的机器上的Safari和Chrome上正常运行。

无论如何，我无法告诉您为什么drawImage在Chrome上比Safari表现更差，仅当图像无法加载然后被绘制时才如此。 否则，Chrome在Windows上似乎更快。

这是我前一段时间做的一个简单的jsperf。 看来Chrome 19在我的Windows 7机器上的运行速度是野生动物园的两倍。