<canvas> 和 <div>s 的效率答案

【问题标题】：Efficiency of <canvas> and <div>s<canvas> 和 <div>s 的效率
【发布时间】：2011-12-21 23:42:41
【问题描述】：

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

我的项目将包含一些精灵（预计一次在屏幕上显示 10 到 30 个），并且有几种方法可以实现它们。一种方法是 CSS-Sprites，另一种是在画布上绘制它们。两者都不难。背景将是另一个<canvas> 在后台绘制的瓦片地图。

我已经看到Crafty 将 Sprite 附加为<div>，它位于<canvas> 内的 HTML 中，作为 CSS-Sprite。我不确定<div> 是否在画布中是否存在速度差异。有区别吗？

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

我希望我可以交流我的问题。

【问题讨论】：

您的目标平台是什么？例如，iOS 与桌面浏览器的性能特征有很大不同，并且根据您是否触发硬件加速也存在很大差异。
我的主要目标是使用任何浏览器的台式机（除了 IE，我不想浪费时间尝试支持 IE），但我不介意它是否也能在移动设备上流畅运行。

标签： performance html canvas css-sprites

【解决方案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

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

总结 FPS：

图像图像精灵精灵浏览器画布 CSS 画布 CSS ---------------------------------------------- Safari v5.0.3 59 95 59 89 火狐v3.6.13 59 95 60 90 火狐v4.0b8 75 89 78 82 铬 v8.0 108 230 120 204 iPad，水平 17 44 2 14 iPad，垂直 4 75 2 15

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

【讨论】：

时间已经过去了，浏览器变得更好了，在我看来，画布版本与当前浏览器相同或更快。你能测试一下我的结果是否正确吗？
这个答案不再正确。我刚刚在 CSS 示例上获得了 ~90 FPS，在画布（Chrome 34）上获得了超过 200 FPS。
浏览器可能已经移动，但是这个答案提供了两个测试，所以我们可以自己看看，所以这仍然是一个非常有用的答案。
我不确定这是否相关，但画布是否需要强制进入硬件加速模式？我的 android 手机在 20 sprite canvas 与 CSS 上的表现很差。

【解决方案2】：

Canvas 具有更好的性能。

它针对这种行为进行了优化。

【讨论】：

在没有引用或基准的情况下被否决。我自己的测试表明情况正好相反。
尝试在您的测试中放置 20 多个动画精灵...尝试 2000。您的测试可以显示其他结果... ;)
是的，但原始问题明确表示：“预计屏幕上会同时出现 10 到 30 个”。
同意。但你是对的，我应该在我的回答中加入一些参考资料。及时：blog.frontendforce.com/2010/03/…

【解决方案3】：

Canvas 会更快，尽管在这么少的对象数量下它不会有太大影响太多。无论如何，您都应该使用 Canvas，因为如果您打算将其扩展为更复杂、更精美，或者您想要特殊效果（如粒子）或拥有更多对象，那么 Canvas 将成为必需品。

如果要像游戏一样运行，请使用 Canvas。但是，如果它要像地图应用程序一样运行，那么 SVG 并不是一个糟糕的选择，因为一些事件工作已经为您完成了。我猜这个项目更接近于游戏。

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

背景将是另一个在背景中绘制的瓦片地图

为了性能起见，只需将画布的 css background-image 设置为这个 tile-map！（假设它没有改变）

【讨论】：