通过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移动图像
• 通过画布在1024x768背景上移动20个精灵
• 通过CSS在1024x768背景上移动20个精灵

以下是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. 你可能 可能做错事,如果你只得到5fps的.

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

Answer 2

它已经超过2年了,我决定运行这些测试,看看这是否仍然适用.它确实......但事实并非如此.

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

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

3. Chrome Mobile(在Nexus 7上)完全相反:画布运行速度明显快于CSS!

(在Linux上使用Firefox Android与Nexus 7和桌面浏览器,分辨率为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吗？