性能通过CSS网页上移动图像VS HTML5画布

我有一个形象，这样的移动时，我的网页（JavaScript）的周围：性能通过CSS网页上移动图像VS HTML5画布

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

不幸的是，表现相当糟糕在所有浏览器，除了铬。瓶颈在于渲染速度。我对IE没有希望，但我想至少改进Firefox。与风格变化相比，有没有人在移动图像时使用HTML5 Canvas的性能？

来源

2011-01-30 Boris Hamanov

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

Moving an Image via Canvas
Moving an Image via CSS
Moving 20 Sprites via Canvas在1024x768的背景
Moving 20 Sprites via CSS在1024x768的背景

这里是the FPS results（见测试细节网址）：

 
        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

正如你可以看到：

你总是会得到更好的结果移动图像作为比重新绘制在画布的一部分的HTML元素，
你可能 可能是如果你只得到5fps，会做错事。

编辑：增加了在背景上移动20个小动画小精灵的测试。结论保持不变。

来源

2011-01-30 22:43:46 Phrogz

在我使用Canvas的经验中，你应该可以在Firefox上获得50fps的好帧率，甚至在iOS上可以获得15fps的好帧率。 IE9可能会成为最快的浏览器，其他版本并没有真正实现Canvas。

来源

2011-01-30 12:37:00

谢谢！在画布上移动图像最快的方法是什么？ – 2011-01-30 12:47:23

@ avok00在画布上移动图像的唯一方法是清除图像所在的矩形，并使用`drawImage（）`再次绘制图像。然而，我强烈怀疑你的表现会因此而变得更糟，而不仅仅是在DOM上移动图像。 – Phrogz 2011-01-30 15:37:20

嗯，那么这是什么约50fps？也许我可以使用translate来移动整个画布并获得更好的性能？ – 2011-01-30 18:36:56

现在已经超过2年了，我决定运行这些测试，看看这是否仍然如此。它确实......并没有。

火狐桌面和移动都运行CSS动画比帆布显著快。
Chrome桌面上运行的帆布和CSS动画差不多
Chrome移动设备（在Nexus 7）做的完全相反：帆布显著更快的运行速度比CSS！

（使用Firefox的Android在Linux上的Nexus 7和桌面浏览器与1920x1080分辨率）

 

Browser/OS   Canvas Image CSS IMage Canvas Sprites CSS Sprites  
-----------   ------------ ---------- -------------- ----------- 
Firefox 16   56.7fps  215.6 fps 59.2fps   203.6fps 
Firefox 16 Android 17.1 fps  179.6fps 11.5fps   35.7 
Chrome 22   192.3fps  223.5fps 170.1fps   164.3fps 
Chrome Android  48.3fps  39.9fps  92.8fps   13.1fps

什么是其他人得到什么？任何人都可以测试IE9,10这个？

来源

2012-11-12 22:49:02

想我会在第三代iPad的更新我发现这个老问题：

帆布胜2：1与精灵动画背景结算约120帧的平均切换两种方式。 CSS几乎不能达到60帧/秒。

至于单张图片，CSS肯定更快。

来源

2013-02-28 15:39:05 MyNameIsKo

除了MyNameIsKo对iPad 3性能的发现。我想知道是否这样做是因为CSS DOM方法不得不担心在iPad 3的视网膜屏幕上绘图，而画布会以较低的分辨率绘制，然后blt'd屏幕。 iPad 1的CSS更新速度明显快于iPad3！

我还对画布javascript做了一些更改，以便能够绘制到视网膜分辨率画布。我在canv.height = h后添加了下面的代码：在bg.onload功能：

if (window.devicePixelRatio) { 
    ctx.canvas.style.width = w + "px"; 
    ctx.canvas.style.height = h + "px"; 
    ctx.canvas.height = h * window.devicePixelRatio; 
    ctx.canvas.width = w * window.devicePixelRatio; 
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio); 
}

这使得性能的巨大减少...

ipad公司1（的iOS 5.5.1）

的iPad 3（6.1.3的iOS）

     CSS Sprite  Canvas Sprites 
----------------------------------------------------- 
iPad 1     90     100 
iPad 3     55     120 
iPad 1(canvas changes) n/a     100 
iPad 3(canvas changes) n/a     35

来源

2013-08-02 08:26:34

性能通过CSS网页上移动图像VS HTML5画布

回答

相关问题