用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>s,尽管它们可能是<image>或者<video>也是.

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

HTML测试选项卡需要永久加载(时间略短于5分钟,Chrome要求首次杀死页面).Chrome的任务经理表示该标签占用了168MB.当我看着它时占用12-13%的CPU时间,当我不看时它占用0%.

"画布"选项卡在一秒钟内加载,占用30MB.它总是占用CPU时间的13%,无论是否正在查看它.

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

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

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

Canvas中的绘图/加载速度要快得多,并且还有更多的优化空间(即,排除屏幕外的东西非常容易).