通过CSS和HTML5 Canvas在网页上展示移动图像的性能比较

Question

通过CSS和HTML5 Canvas在网页上展示移动图像的性能比较

23

我有一张图片，用JavaScript将其在网页上移动，代码如下：

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

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

- Boris Hamanov

5个回答

10

现在已经过去两年多了，我决定运行这些测试来查看这是否仍然成立。有时候是对的...有时候不是。

Firefox桌面版和移动版都比canvas更快地运行CSS动画。
Chrome桌面版在canvas和CSS动画方面表现大致相同。
Chrome移动版（Nexus 7上）完全相反：canvas比CSS更快！

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

浏览器/操作系统        Canvas图片    CSS图片     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吗？

- Don Rhummy

我刚在Ubuntu系统上的Firefox 21上运行了测试。每个测试的帧速率大约为220fps，除了CSS Sprites测试，它的帧速率实际下降到了120fps左右。 - Spider

3

我想更新一下这个关于第三代iPad的旧问题，并分享我的研究结果：

在精灵动画方面，使用Canvas可以获得平均约120fps的背景清除切换。而CSS则只能勉强达到60fps。

至于单张图片，CSS显然更快一些。

- MyNameIsKo

值得看一下我下面的答案，了解为什么可能会这样...以及可能会有更多类似的测试结果。 - Nick Hingston

2

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

- Jakub Hampl

谢谢！在画布上移动图像的最快方法是什么？ - Boris Hamanov

@avok00 在画布上移动图像的唯一方法是清除图像所在的矩形，然后使用 drawImage() 再次绘制它。我强烈怀疑这样做的性能会比在 DOM 上移动图像要差得多。 - Phrogz

嗯，那么50fps是什么意思呢？也许我可以使用平移来移动整个画布，以获得更好的性能？ - Boris Hamanov

@avok00 Jakub的电脑不是你的。编写一个简单的测试来比较性能。 - Phrogz

那就是问题所在。我无法编写一个简单的测试。我的网站非常复杂，有许多层，阴影、CSS3、带有大量透明度的背景图像等等，所有这些都会影响性能。我必须几乎实现它才能进行测试 :) 否则我就不会在这里询问了。顺便说一句，我的电脑相当强大。但是FF在移动图像时仍然很糟糕。不超过5 FPS。 - Boris Hamanov

0

关于MyNameIsKo在iPad 3性能方面的发现，我想知道是否与CSS DOM方法需要在iPad 3的视网膜屏幕上绘制有关，而画布则会以较低分辨率绘制，然后blt到屏幕上。相比之下，iPad 1在CSS更新方面要快得多！

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

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

- Nick Hingston

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phrogz · Accepted Answer

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

这里是FPS结果 (有关测试详细信息请参见URL):

                  图形   图形  精灵     精灵
        浏览器    画布    CSS  画布      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, 横屏      17     44      2      14
    iPad, 竖屏       4     75      2      15

正如你所看到的:

将图像作为HTML元素移动总是会比重绘画布的一部分效果更好，并且
如果您只得到5fps，则可能做错了什么。

编辑: 添加了移动20个小动画精灵在背景上的测试。结论仍然相同。