Question

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

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

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

Answer 1

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

Moving an Image via Canvas
Moving an Image via CSS
Moving 20 Sprites via Canvas在1024x768背景下
Moving 20 Sprites via CSS在1024x768背景下

以下是the FPS results（请参阅测试详情的网址）：

                  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

如你所见：

将图像作为HTML元素移动，而不是重绘部分画布，总能获得更好的效果，
如果您只获得5fps，那么可能可能做错了。

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

Answer 2

现在已经超过2年了，我决定运行这些测试，看看这是否仍然适用。它确实......而且它没有。

Firefox桌面和移动都比画布快得多地运行CSS动画。
Chrome桌面运行有关相同
Chrome Mobile（在Nexus 7上）完全相反：画布运行速度明显快于CSS！

（在Linux上使用带有Nexus 7和桌面浏览器的Firefox Android，分辨率为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

想想我会在第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的视网膜屏幕上绘图这一事实有关，而画布将以较低的分辨率绘制，然后进行屏幕显示。与iPad3相比，iPad 1的CSS更新速度明显更快！

我还对canvas 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

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

5 个答案: