问使用html5画布、html和javascript绘图的速度有什么不同？

EN

我在HTML制作的绘图和Canvas制作的绘图上运行了一堆数字。我可以发表一篇很大的文章来说明每种方法的好处，但我会给出一些相关的测试结果，供您考虑具体的应用程序：

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

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

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

画布标签在一秒内加载，占用30MB。它也会一直占用CPU时间的13%，无论用户是否正在查看它。

在HTML页面上拖动会更流畅，我想这是意料之中的，因为当前的设置是在画布测试中每30毫秒重绘一次所有内容。为此，有很多针对Canvas的优化。(画布失效是最简单的，也是裁剪区域，选择性重绘等。这取决于你有多想实现)

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

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

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

更快的渲染速度还是更快的开发速度？我会说这两个问题的答案都是HTML5 canvas。尽管它是一项相当新的技术，甚至还没有得到所有主流浏览器的支持，但它已经拥有比使用普通HTML的DIVs多得多的功能。我以前用div做过绘图，仅仅是让一些东西工作起来就令人难以置信的沮丧。有了canvas，你就已经有了一个框架来完成大多数基本的绘图。此外，html5是新的。即使它现在比使用div绘图相对较慢(很可能不是)，但随着开发和采用的增加，性能也会提高。对于使用div绘图，我就不能说同样的话了。

使用HTML5 Canvas的优点：

• 与其他绘图框架(OpenGL、DirectX)类似，在未来的
• 中，

将继续提高

• 的性能，并在and 3D框架中实现硬件加速

这两个游戏都不需要HTML5。scrabb.ly使用矩形对象做所有事情，div处理得很好，而且国际象棋游戏甚至不使用动画。如果这是您正在考虑构建的游戏类型，那么您应该根据熟悉程度和兼容性而不是性能来决定使用哪种游戏。