小编典典

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

css

我有一个图像,并将其在我的网页(JavaScript)上移动,如下所示:

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

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


阅读 250

收藏
2020-05-16

共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个小型动画精灵的测试。结论保持不变。

2020-05-16