<canvas>和<div>的效率

Question

我想问一下是否有人能给我一些我想做的设计决定的提示.

我的项目将包含一些精灵(一次在屏幕上预期10到30个),并且有几种方法可以实现它们.一种方法是CSS-Sprites,另一种方法是在画布上绘制它们.两者都不难.背景将是另一个<canvas>在后台绘制的图块地图.

我已经看到Crafty附加了Sprites,<div>因为它在HTML中<canvas>作为CSS-Sprite.我不确定如果<div>在画布中是否存在速度差异.有区别吗？

我希望用户通过鼠标点击,左,右等与精灵交互.精灵当然是在瓷砖地图的元素上站立或行走.那么编写一个处理程序<canvas>并找到精灵更有效率,或者更确切地说使用<div>并让浏览器处理这个发现？

我希望我可以传达我的问题.

Answer 1

我的测试表明纯粹的HTML + CSS对于精灵来说通常比​​Canvas更快:
通过CSS与HTML5 Canvas在网页上运动图像的性能

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

具体来说,我有两个测试几乎与您的问题完全相同:

• 使用CSS的20个动画精灵
• 使用Canvas的20个动画精灵

总结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仍然更慢并且工作量更大.