通过 CSS 与 HTML5 Canvas 在网页上移动图像的性能

Question

我有一个图像并将其移动到我的网页（JavaScript）中，如下所示：

satelliteImage.style.top = coordinates.top + "px";
satelliteImage.style.left = coordinates.left + "px";

不幸的是，除了 Chrome 之外，所有浏览器的性能都很差。瓶颈在于渲染速度。我对IE不抱希望，但我至少想改进Firefox。与样式更改相比，有人有过移动图像时 HTML5 Canvas 性能的经验吗？

Answer 1

我创建了等效的测试来比较通过 CSS 移动图像与在 HTML 画布上绘制图像的帧速率。以下是测试：

• 通过画布移动图像
• 通过 CSS 移动图像
• 移动 20通过 Canvas 在 1024x768 背景上显示精灵
• 背景上

通过 CSS 移动 20 个精灵 在1024x768 以下是 FPS 结果（有关测试详细信息，请参阅 URL）：

                  Image  Image  Sprite  Sprite
        Browser  Canvas    CSS  Canvas     CSS
----------------------------------------------
  Safari v5.0.3      59     95      59      89
Firefox v3.6.13      59     95      60      90
 Firefox v4.0b8      75     89      78      82
    Chrome v8.0     108    230     120     204
    iPad, Horiz      17     44       2      14
     iPad, Vert       4     75       2      15

如您所见

1. ：将图像作为 HTML 元素移动总是比重新绘制画布的一部分获得更好的结果，并且
2. 如果您只得到5 帧/秒。

编辑：添加了在背景上移动 20 个小动画精灵的测试。结论保持不变。

Answer 2

现在已经过去两年多了，我决定进行这些测试，看看这是否仍然成立。确实如此……但也没有。

1. Firefox 桌面版和移动版运行 CSS 动画的速度均明显快于画布。

2. Chrome 桌面版运行的画布和 CSS 动画大致相同

3. Chrome 移动版（在 Nexus 7 上）的做法完全相反：画布的运行速度明显快于 CSS！< /p>

（在 Nexus 7 上使用 Firefox Android 以及 Linux 上的桌面浏览器，分辨率为 1920x1080）

Browser/OS          Canvas Image   CSS IMage   Canvas Sprites   CSS Sprites    
-----------         ------------   ----------  --------------   -----------
Firefox 16          56.7fps        215.6 fps   59.2fps          203.6fps
Firefox 16 Android  17.1 fps       179.6fps    11.5fps          35.7
Chrome 22           192.3fps       223.5fps    170.1fps         164.3fps
Chrome Android      48.3fps        39.9fps     92.8fps          13.1fps

其他人会得到什么？有人可以测试 IE9、10 吗？

Answer 3

我想我会用我在第三代 iPad 上的发现来更新这个老问题：

Canvas 以 2:1 获胜，精灵动画平均约为 120 fps，背景清除双向切换。 CSS 勉强能达到 60 fps。

对于单张图片来说，CSS 肯定更快。

Answer 4

根据我使用 Canvas 的经验，您应该能够在 Firefox 上获得良好的 50 fps，甚至在 iOS 上获得良好的 15 fps。 IE9 可能是最快的浏览器，其他版本并没有真正实现 Canvas。

Answer 5

进一步了解 MyNameIsKo 对 iPad 3 性能的调查结果。我想知道这是否与 CSS DOM 方法必须担心在 iPad 3 的视网膜屏幕上绘制而画布将以较低的分辨率绘制然后 blt 到屏幕这一事实有关。 iPad 1 的 CSS 更新速度明显快于 iPad3！

我还对画布 JavaScript 进行了一些更改，以便能够绘制到视网膜分辨率画布。我在 canv.height = h; 之后添加了以下代码在 bg.onload 函数中：

if (window.devicePixelRatio) {
    ctx.canvas.style.width = w + "px";
    ctx.canvas.style.height = h + "px";
    ctx.canvas.height = h * window.devicePixelRatio;
    ctx.canvas.width = w * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

这极大地降低了性能...

iPad 1 (iOS 5.5.1)

iPad 3 (iOS 6.1.3)

                      CSS Sprite        Canvas Sprites
-----------------------------------------------------
iPad 1                   90                  100
iPad 3                   55                  120
iPad 1(canvas changes)   n/a                 100
iPad 3(canvas changes)   n/a                 35