用html5画布和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>，但它们也可以是<image>或<video>。

我在两次测试中都添加了100,000个节点。他们表现完全不同：

HTML测试选项卡需要永久加载（时间略短于5分钟，Chrome要求首次终止该页面）。 Chrome的任务经理表示该标签占用了168MB。当我看着它时占用12-13％的CPU时间，当我不看时它占用0％。

“画布”标签在一秒钟内加载，占用30MB。它总是占用CPU时间的13％，无论是否正在查看它。

在HTML页面上拖动更顺畅，我认为这是预期的，因为当前的设置是在Canvas测试中每30毫秒重绘一次。 Canvas有很多优化可供选择。 （画布失效是最简单的，也是裁剪区域，选择性重绘等等。只取决于你实现的感觉）

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

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

在Canvas中单独绘制/加载远更快，并且还有更多的优化空间（即，排除屏幕外的内容非常容易）。

Answer 2

快速渲染或更快的开发速度如何？我会说两者的答案都是HTML5画布。虽然它是一项相当新的技术，甚至还没有得到所有主流浏览器的支持，但它已经具有比使用普通HTML的DIV更多的功能。我之前已经完成了div的绘制，只是让一些东西工作令人难以置信的沮丧。使用canvas，您已经有了一个框架来完成大多数基本绘图。此外，html5是新的。即使它现在比使用div更慢（它可能不是），但随着开发和采用的增加，性能将会提高。我不能用div来画画。

使用HTML5 Canvas的优点：

• 与其他绘图框架（OpenGL，DirectX）类似
• 将继续提升性能和功能
• 将来可能成为硬件加速
• 未来可能的3D框架

Answer 3

这些游戏都不需要HTML 5. scrabb.ly使用矩形对象完成所有操作，divs处理得很好，国际象棋游戏甚至不使用动画。如果这是你想要构建的那种游戏，那么你应该根据熟悉度和兼容性而不是性能来决定。