我有一个图像,并将其在我的网页(JavaScript)上移动,如下所示:
satelliteImage.style.top = coordinates.top + "px"; satelliteImage.style.left = coordinates.left + "px";
不幸的是,除Chrome之外,所有浏览器的性能都非常差。瓶颈在于渲染速度。我对IE没有希望,但是至少我要改进Firefox。与样式更改相比,有人在移动图像时具有HTML5 Canvas性能的经验吗?
我已经创建了等效的测试来比较通过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
如你看到的:
编辑 :添加了在背景上移动20个小型动画精灵的测试。结论保持不变。