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

【问题标题】：Why does drawImage perform so much faster in Safari than Chrome or Firefox?为什么 drawImage 在 Safari 中的执行速度比 Chrome 或 Firefox 快得多？
【发布时间】：2012-03-24 01:50:14
【问题描述】：

为了好玩，我制作了一个小的 HTML 画布可视化工具，我注意到它在 Chrome 中运行得非常糟糕，在 Firefox 中非常糟糕，但在 Safari 中绝对令人惊讶，包括 iPhone 和 iPad！

谁能解释一下原因？

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

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

任何见解将不胜感激！

附言。如果可以的话，在 iPad 上试试这个；多点触控非常简洁:)

【问题讨论】：

标签： javascript canvas drawimage requestanimationframe

【解决方案1】：

由于 Safari 和 Chrome 中的性能分析器几乎相同，您应该能够自己确定这一点。您的演示在我机器上的 Safari 和 Chrome 上运行良好。

无论如何，我无法告诉你为什么 drawImage 在 Chrome 上的性能比 Safari 差，只是 当图像加载失败然后被绘制时它会这样做。 否则 Chrome 在 Windows 上似乎更快。

Here's a simple jsperf I made a while ago. 在我的 windows 7 机器上，chrome 19 的运行速度似乎是 safari 的两倍。

【讨论】：

是的，我确实使用分析器将其缩小到 drawImage，但这并不能回答我的问题：为什么？这是我必须与 Chrome 团队讨论的事情，还是我做错了什么而 Safari 处理得更好？
你在运行什么样的机器？在我的 chrome 上，速度是 safari 的两倍。（您使用的是什么版本的 chrome？）
我在 OS X Lion (10.7.3) 上运行 Chrome 17.0.963.83。 Chrome 的速度接近 3 fps，而 Safari 在 40-50 范围内（相同大小的浏览器窗口）。
这很奇怪。在最大屏幕上，我在 Safari 上获得 10，在 Chrome 19 上获得 60。我想您应该尝试使用 chrome 的开发人员版本，看看这是否会改变您的数字。否则我不确定为什么 mac/pc 之间会有差异
也许这是他们在开发频道中修复的问题。我刚刚在 Win 7 (Chrome 17) 上尝试过，它对我来说也很慢。