性能通過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畫布

回答

相關問題