javascript - 用html5 canvas和html和javascript画图速度有什么区别？

Question

我对使用 html 和 javascript 制作游戏很感兴趣。我想知道在 html5 和 javascript 中绘制是否真的比在 html 和 javascript 中绘制图像和 div 快得多。

使用 html 和 javascript 运行良好的游戏示例: http://scrabb.ly/

使用 html5 和 javascript 运行良好的游戏示例: http://htmlchess.sourceforge.net/demo/example.html

Answer 1

我对 HTML 绘图与 Canvas 绘图进行了一系列比较。我可以就每一种的好处发表大量文章，但我会给出一些我的测试的相关结果，供您考虑用于您的特定应用:

我制作了 Canvas 和 HTML 测试页面，它们都有可移动的“节点”。 Canvas 节点是我在 Javascript 中创建并跟踪的对象。 HTML 节点为 <div> s，尽管它们可能是 <image>或 <video>也是。

我在两个测试中分别添加了 100,000 个节点。他们的表现完全不同:

HTML 测试选项卡需要很长时间才能加载(时间略低于 5 分钟，chrome 要求在第一时间终止该页面)。 Chrome 的任务管理器显示该选项卡占用了 168MB。当我看它时它占用 12-13% 的 CPU 时间，当我不看时它占用 0%。

Canvas 选项卡加载时间为一秒，占用 30MB。它还始终占用 13% 的 CPU 时间，无论是否有人正在查看它。

在 HTML 页面上拖动更顺畅，我想这是意料之中的，因为当前设置是在 Canvas 测试中每 30 毫秒重绘所有内容。为此，Canvas 有很多优化。 ( Canvas 失效是最简单的，还有裁剪区域、选择性重绘等。仅取决于您想要实现的程度)

HTML 页面上的视频，虽然我没有移动对象，但实际上非常流畅。

在 Canvas 上，视频总是很慢，因为我不断地重新绘制，因为我关闭了我的绘图 Canvas 失效。当然还有很大的改进空间。

单独的绘图/加载在 Canvas 中远更快，并且也有更多的优化空间(即，排除屏幕外的东西非常容易)。