通过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画布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 108230120204
    iPad，Horiz 17 44 2 14
     iPad，垂直4 75 2 15

如你看到的：

1. 与重新绘制画布的一部分相比，将图像作为HTML元素移动总是会获得更好的结果，并且
2. 你 可能 可能 做错事，如果你只得到5fps的。

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