通过CSS和HTML5 Canvas在网页上运动图像的性能 [英] Performance of moving image on web page via CSS vs HTML5 Canvas

问题描述

我有一个图像，并移动它在我的网页（JavaScript）像这样：

I have an image and move it around my web page (JavaScript) like this:

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

不幸的是，除Chrome外，所有浏览器的性能都相当差。瓶颈是渲染速度。我没有希望IE，但我想改进Firefox至少。

Unfortunately, the performance is quite bad in all browsers except Chrome. The bottleneck is rendering speed. I have no hope for IE, but I want to improve Firefox at least. Does anyone have experience with performance of HTML5 Canvas while moving an image, compared to Style change?

推荐答案

我已经创建了等效的测试比较通过CSS移动图像的帧速率和在HTML画布上绘制图像的帧速率。以下是测试：

I have created equivalent tests to compare frame rates for moving an image via CSS versus drawing it on an HTML canvas. Here are the tests:

• 通过画布移动图片


• 移动图片通过CSS


• 通过画布移动20个精灵超过1024x768背景


• 通过CSS移动20个精灵超过1024x768背景

• Moving an Image via Canvas
• Moving an Image via CSS
• Moving 20 Sprites via Canvas over a 1024x768 background
• Moving 20 Sprites via CSS over a 1024x768 background

这是 FPS结果（请参阅测试详情的网址）：

And here are the FPS results (see URL for test details):

                  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元素移动的效果比重新绘制画布的一部分要好， / li>
   
2. 如果您只有5fps的话，可能可能会执行错误。

1. You're always going to get better results moving an image as an HTML element than redrawing a portion of the canvas, and
2. You're likely possibly doing something wrong if you're only getting 5fps.

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

Edit: Added tests for moving 20 small animated sprites over a background. The conclusions remain the same.

这篇关于通过CSS和HTML5 Canvas在网页上运动图像的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！