performance - <canvas> 和 <div> 的效率

Question

我想问问是否有人可以给我一些关于我想做出的设计决定的提示。

我的项目将包含一些 Sprite (预计屏幕上同时显示 10 到 30 个)，并且有多种实现它们的方法。一种方法是 CSS-Sprites，另一种方法是在 Canvas 上绘制它们。两者都不难。背景将是由另一个人绘制的瓷砖 map <canvas> , 在后台。

我看过 Crafty将 Sprites 附加为 <div>在 <canvas> 中的 HTML 中, 作为 CSS-Sprite。我不确定 <div> 是否存在速度差异是否在 Canvas 中。有区别吗？

我希望用户通过鼠标点击、向左、向右等方式与 sprite 进行交互。当然，sprite 会在图 block map 的元素上站立或行走。那么为 <canvas> 编写处理程序是否更有效？并找到 Sprite ，或者更确切地说使用 <div>并让浏览器处理发现的结果？

我希望我能传达我的问题。

Answer 1

我的测试表明，对于 Sprite 来说，纯 HTML + CSS 通常比 Canvas 更快:
Performance of moving image on web page via CSS vs HTML5 Canvas

在此处查看测试和结果(来自 10 个月前的浏览器):
http://phrogz.net/tmp/image_move_speed.html

具体来说，我有两个测试几乎和你的问题完全一样:

• 20 animated sprites using CSS
• 20 animated sprites using Canvas

汇总 FPS:

                  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

较新的浏览器通常要快得多(Chrome 几乎总是在同一台机器上达到 250fps 的内部上限)并且缩小差距，但使用 Canvas 仍然更慢并且工作量更大。