<canvas>和<div>的效率比较

Question

我想问一下，有没有人能够对我要做的设计决策提供一些提示。

我的项目将会涉及到一些精灵(屏幕上预计会有10至30个)，而有几种方法可以实现它们。一种方法是使用CSS-Sprites，另一种方式是在画布上绘制它们。这两种方法都不难。背景将由另一个<canvas>绘制成平铺地图，在后台。

我看到过Crafty将Sprites作为<div>附加到HTML中的<canvas>中，作为CSS-Sprite。我不确定如果<div>是否放在画布中会有速度差异。有区别吗？

我希望用户通过鼠标点击左右等方式与精灵进行交互。当然，这些精灵会站立或行走在平铺地图的元素上。那么，编写处理<canvas>的程序并查找精灵是否更有效，还是使用<div>并让浏览器处理查找呢？

我希望我能够清楚地表达我的问题。

- Lanbo

---

你的目标平台是什么？例如，与桌面浏览器相比，iOS具有非常不同的性能特征，并且根据是否触发硬件加速，差异也很大。 - robertc

我的主要目标是在任何浏览器上使用的桌面系统（除了IE，我不想浪费时间试图支持IE），但如果它在移动设备上运行流畅，也不会介意。 - Lanbo

Answer 1

我的测试结果显示，就雪碧图而言，纯HTML+CSS通常比Canvas更快：
在网页上通过CSS或HTML5 Canvas移动图片的性能 这里可以查看测验和结果（来自10个月前的浏览器）:
http://phrogz.net/tmp/image_move_speed.html 具体来说，我进行了两项与您的问题几乎完全相同的测试：

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

FPS总结如下:

                  图片  图片  精灵  精灵
        浏览器   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仍然更慢且工作量更大。

- Phrogz

---

时间已经过去，浏览器变得更好了，我觉得画布版本在当前的浏览器中速度与原来相当甚至更快。请您测试一下我的结果是否正确？ - ASA

这个答案已经不正确了。我刚在一个CSS示例上获得了约90 FPS，在画布上获得了超过200 FPS（Chrome 34）。 - Konrad Dzwinel

浏览器可能已经更新了，但是这个答案提供了两个测试，让我们自己来看看，所以这仍然是一个非常有用的答案。 - Michael

我不确定这是否相关，但是画布需要强制进入硬件加速模式吗？我的安卓手机在20个精灵画布上的性能比CSS差得多。 - Nathan Goings

Answer 2

Canvas具有更好的性能。

它被优化以执行此类行为。

- Ricardo Bin

---

没有引用或基准测试就被踩了。我的测试表明相反的是真的。 - Phrogz

尝试在你的测试中放置超过20个动画精灵... 尝试2000个。你的测试可以展示其他结果... ;) - Ricardo Bin

是的，但原问题明确表示：“一次在屏幕上显示10到30个”。 - Phrogz

同意。但你说得对，我应该在我的回答中加入一些参考资料。这里是一个链接：http://blog.frontendforce.com/2010/03/games-development-in-javascript-canvas-vs-dom-benchmark/ - Ricardo Bin

Answer 3

Canvas会更快，虽然在这么少的对象数量下不会有太大影响。无论如何，您应该选择Canvas，因为如果您计划将其扩展为更复杂、更精细或者想要特殊效果（如粒子），或者拥有更多对象，Canvas将成为必需品。

如果这将像游戏一样运行，请使用Canvas。但是，如果它将像映射应用程序一样运行，SVG并不是一个坏的替代方案，因为其中一些事件工作已经为您完成了。我猜这个项目更接近于游戏。

我对类似这样的问题给出了更长的回答，例如在这里：HTML5 Canvas vs. SVG vs. div

背景将由另一个人绘制的平铺地图，在后台

出于性能考虑，只需将canvas的css background-image设置为此平铺地图即可！（假设它不会改变）

- Simon Sarris