简体繁体 English

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

[英]Why does drawImage perform so much faster in Safari than Chrome or Firefox?

原文 2012-03-23 14:40:55 8 1 javascript/ canvas/ drawimage/ requestanimationframe

I made a little HTML canvas visualizer for fun, and I have noticed that it runs horribly in Chrome, pretty bad in Firefox, but absolutely amazingly in Safari, including iPhone and iPad! 我做了一个小小的HTML canvas可视化工具，很有趣，并且我注意到它在Chrome中运行非常糟糕，在Firefox中非常糟糕，但是在Safari（包括iPhone和iPad）中绝对令人惊讶！

Can anyone explain why? 谁能解释为什么？

I think the code should be fairly straightforward, but basically I'm drawing points for mouse (or touch) location(s), then copying the canvas to a temporary canvas using drawImage. 我认为代码应该相当简单，但是基本上我是在为鼠标（或触摸）位置绘制点，然后使用drawImage将画布复制到临时画布。 From there I clear the display canvas, then copy the temp canvas back (4 times), but applying a few things like rotation, offset, transparency and scale (and playing around with some different globalCompositeOperations), all using drawImage. 从那里我清除了显示画布，然后将临时画布复制回了4次，但是应用了诸如drawing，旋转，偏移，透明度和缩放（以及使用一些不同的globalCompositeOperations）之类的一些东西。 So in total, drawImage is called 5 times in each loop. 因此，总共，在每个循环中drawImage被调用5次。

You can view the demo here: http://lakenen.com/vis.html 您可以在此处查看演示： http : //lakenen.com/vis.html

Any insight would be greatly appreciated! 任何见解将不胜感激！

PS. PS。 try this on an iPad if you can; 如果可以，请在iPad上尝试； it's pretty neat with multi-touch :) 多点触控非常简洁:)

1 个解决方案

Since the performance profiler is pretty much identical in Safari and Chrome you should be able to determine this yourself. 由于性能分析器在Safari和Chrome中几乎相同，因此您应该可以自行确定。 Your demo runs fine on both Safari and Chrome on my machine. 您的演示可以在我的机器上的Safari和Chrome上正常运行。

Anyway, I can't tell you why drawImage performs worse on Chrome than Safari, only that it does when an image fails to load and is then drawn. 无论如何，我无法告诉您为什么drawImage在Chrome上比Safari表现更差，仅当图像无法加载然后被绘制时才如此。 Otherwise Chrome seems faster on Windows. 否则，Chrome在Windows上似乎更快。

Here's a simple jsperf I made a while ago. 这是我前一段时间做的一个简单的jsperf。 It seems to show chrome 19 running twice as fast as safari on my windows 7 machine. 看来Chrome 19在我的Windows 7机器上的运行速度是野生动物园的两倍。