使用html5画布和html和javascript进行绘图之间的速度差异是甚么?

前端之家收集整理的这篇文章主要介绍了使用html5画布和html和javascript进行绘图之间的速度差异是甚么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有兴趣使用html和 javascript制作游戏.我想知道,如果它真的是html5和javascript的绘图更快,而不是与图像和div的HTML和 JavaScript.

使用html和javascript的游戏的例子很好用:
http://scrabb.ly/

使用html5和javascript的游戏的例子很好:
http://htmlchess.sourceforge.net/demo/example.html

解决方法

我在HTML制作的绘图和画布制作的绘图上运行了一堆数字.我可以发表一个关于每个人的好处的巨大职位,但是我将给出我的测试的一些相关结果,以考虑您的具体应用:

我做了Canvas和HTML测试页面,都有可移动的“节点”.画布节点是我创建的对象,并在Javascript中保持跟踪. HTML节点为< div>,尽管它们可以是< image>或< video>太.

我在我的两个测试中添加了10万个节点.他们表现的不同:

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

画布选项卡在一秒钟内加载并占用30MB.它也占用了所有cpu时间的13%,无论是否查看.

拖动HTML页面是更平滑,我认为是预期的,因为当前的设置是在Canvas测试中每30毫秒重绘一次. Canvas有很多优化. (画布无效是最简单的,也是剪辑区域,选择性重绘等等)只取决于你想要实现的多少)

视频在HTML页面上,而我不移动的对象,实际上是完美的平滑.

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

绘画/单独加载在Canvas中更快,并且还有更多的优化空间(即排除屏幕外的东西非常简单).

猜你在找的HTML5相关文章