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

问题描述

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

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

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

解决方案

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

• 移动图片


• 通过CSS移动图片


• 通过1024x768背景移动20个Sprites通过画布


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

这里是 FPS结果（请参阅测试详细信息的网址）：

 
图像图像Sprite Sprite 
浏览器画布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 108 230 120 204 
 iPad，Horiz 17 44 2 14 
 iPad，Vert 4 75 2 15 
 

如您所见：

2. 您可以可能 可能会将图片作为HTML元素移动，而不是重新绘制画布的一部分 移动20个小动画精灵在背景。结论仍然相同。
   
   

   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";
   

   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?

   解决方案

   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:

   • 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

   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
   

   As you can see:

   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.

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

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