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

问题描述

我有一个图像并像这样在我的网页 (JavaScript) 中移动它:

satelliteImage.style.top = 坐标.top + "px";SatelliteImage.style.left = 坐标.left + "px";

不幸的是，除了 Chrome 之外，所有浏览器的性能都很糟糕.瓶颈是渲染速度.我对 IE 没有希望，但我想至少改进 Firefox.与样式更改相比，有没有人在移动图像时体验过 HTML5 Canvas 的性能?

解决方案

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

• 通过画布移动图像
• 通过 CSS 移动图像
• 在 1024x768 背景上通过 Canvas 移动 20 个精灵
• 通过 CSS 在 1024x768 背景上移动 20 个精灵

这里是FPS 结果(有关测试详情，请参阅网址):

<预>图像 图像精灵 精灵浏览器 Canvas CSS Canvas CSS----------------------------------------------Safari v5.0.3 59 95 59 89火狐 v3.6.13 59 95 60 90火狐 v4.0b8 75 89 78 82Chrome v8.0 108 230 120 204iPad，水平 17 44 2 14iPad，垂直 4 75 2 15

如您所见:

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

编辑:添加了在背景上移动 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屋！