css3 animation 和 html5 canvas 效能比較（轉自SO）

fishenal發表於2014-03-17
CSSS3HTMLCanvas

原問題見這裡

                  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



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

上面的答案是11年釋出的，下面的答案是12年釋出的，更新的測試顯示

  • 火狐瀏覽器css動畫明顯快於canvas
  • chrome桌面端canvas和css動畫效能相當
  • chrome移動端 canvas優於 css動畫

相關文章