logo标签列表

使用HTML5 Canvas和HTML及JavaScript绘图的速度差异是多少？

javascripthtmlcanvas
13

我对使用HTML和Javascript制作游戏很感兴趣。我想知道在HTML5和JavaScript中绘制与在HTML和JavaScript中使用图像和div相比，是否真的会更快。

以下是使用HTML和JavaScript实现的一个良好游戏示例： http://scrabb.ly/

以下是使用HTML5和JavaScript实现的一个良好游戏示例： http://htmlchess.sourceforge.net/demo/example.html

3个回答
16

我对HTML绘图和Canvas绘图进行了大量测试。我可以撰写一篇关于每种绘图方法的优点的长文，但是我会给出我的一些测试结果，供您参考：

我创建了Canvas和HTML测试页面，两者都有可移动的“节点”。Canvas节点是我在Javascript中创建并跟踪的对象。HTML节点是<div>，但也可以是<image>或<video>。

我向我的两个测试页面添加了10万个节点。它们的表现有很大不同：

HTML测试标签页需要非常长时间才能加载完（在稍微低于5分钟的时间内计时，Chrome第一次请求终止该页面）。Chrome任务管理器显示该标签页占用了168MB的内存。当我查看该网页时，它占用12-13%的CPU时间，在我不查看时占用0%的CPU时间。

Canvas标签页在1秒钟内加载完成，并且只占用30MB的内存。无论是否查看该网页，它的CPU时间都占用13%。

在HTML页面上拖动更加平滑，这应该是预期的，因为当前设置是在Canvas测试中每30毫秒重新绘制全部内容。Canvas还有许多优化空间（最简单的是Canvas失效，还有剪辑区域、选择性重新绘制等等，这取决于您想实现多少）。

当我不移动对象时，在HTML页面上的视频是完美流畅的。

在Canvas上，由于我关闭了绘图画布失效功能，所以视频始终很慢。当然，这还有很大的改进空间。

在Canvas中，仅绘制/加载速度比HTML快得多，并且也有更多的优化空间（例如，排除屏幕外的物体非常容易）。

8
你有每个项目的演示示例吗？ - Steropes
3
快速，是指渲染速度还是开发速度更快？我会说答案对于两者都是HTML5画布。虽然它是一项相当新的技术，而且并不被所有主流浏览器支持，但它已经比通过普通HTML的DIVs使用时拥有更多的功能。我以前用DIV来绘图，但让事情正常工作非常令人沮丧。使用canvas，您已经有一个框架来完成大部分基本绘图了。此外，HTML5是新的。即使现在它相对于使用DIVs进行绘制可能较慢（这也许并不是真的），随着开发和采用率的增加，性能将会提高。对于使用DIVs进行绘图，我不能说同样的话。
使用HTML5 Canvas的优点：
  • 与其他绘图框架（OpenGL、DirectX）类似
  • 性能和功能将继续提升
  • 未来可能会成为硬件加速
  • 未来可能出现3D框架
2

这两个游戏都不需要使用HTML 5。scrabb.ly的所有操作都是基于矩形对象完成的，可以用div轻松处理；而象棋游戏甚至不使用动画效果。如果你想要开发这种类型的游戏，那么你应该根据熟悉度和兼容性来决定使用什么技术，而不是性能。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接