Html5 Canvas 与SVG 和 div 比较

来源:luqidong 发布时间:2014-02-18 21:52:28 点击数:
 
SVG将是您更容易,因为选择和移动它已经内置了SVG的对象是DOM对象,所以他们的“点击”处理程序等。
DIV的都还可以,但笨重,有可怕的性能负载在大数。
Canvas 具有最佳性能双手向下,但你必须实现管理的所有的概念(对象选择等)自己,或者使用一个库。
 
 
 
HTML5的Canvas是一个简单的绘图表面的位图。您可以设置画(用了都说颜色和线宽) ,得出的东西,然后在画布并不知道那东西:它不知道它在哪里或者它是什么,你刚刚绘制的,它是只是像素。如果你想绘制矩形,并让它们走动或者是可选择的,那么你必须从头开始编写了这一切,包括代码要记住,你拉他们。
 
SVG ,另一方面必须保持引用的每个对象,它呈现。你创建的每一个SVG / VML元素在DOM中真正的元素。默认情况下,这可以让你保持更好的跟踪你创建的元素,使处理事情,比如鼠标事件在默认情况下更容易,但它会减慢显著当有大量的对象
 
那些SVG DOM的引用意味着一些处理你画的东西的步法是为你做。和SVG的渲染速度更快,当真正大的物体,但速度慢很多渲染对象时。
 
一个游戏很可能会在画布更快。一个巨大的地图程序很可能会在SVG更快。如果你想使用画布,我对获得可移动物体并在这里运行一些教程。
 
帆布将是更快的东西和重型位图操作(如动画)更好,但需要更多的代码,如果你想很多的互动。
 
我已经运行的HTML一堆数字DIV制作图纸与帆布制作的图纸。我可以让每个的好处了巨大的岗位,但我会给出一些我测试的相关结果考虑为您的具体应用:
 
我做了帆布和HTML的DIV测试页面,有两个可移动的“节点”。帆布节点是我创建并在Javascript中保持跟踪的对象。 HTML节点是可移动的div 。
 
我加了100,000个节点到每个我的两个测试。他们的表现相当不同:
 
在HTML测试标签了永远载入(定时在稍低于5分钟) 。 Chrome的任务管理器说,标签是占用了168MB 。它占用了12-13 %的CPU时间时,我看着它, 0 %的时候,我不看。
 
画布选项卡装在一秒钟内,占用30MB 。它还占用的CPU时间13 %的时间,而不管是否没有一个是看它。 (2013年编辑:他们大多已经固定了)
 
拖动HTML页面上更加平滑,预计由设计,因为目前的设置是一切重绘每30毫秒在画布测试。有大量的优化以待己的画布如此。 (Canvas 失效是最简单,也是裁剪区域,有选择性的重新划分,等等。只是取决于你有多少感觉像实施)
 
毫无疑问,你可以得到画布上要快于对象的操作是在简单的测试的div ,当然远快于加载时间。图/加载速度更快的Canvas和具有优化远远更多的空间,太(即不包括的东西都是关屏是非常容易的) 。
 
结论:
 
SVG是可能的应用程序和应用程序有几个项目更好的
Canvas是几千年的对象和谨慎操纵更好,但更大量的代码(或库)是需要得到它离开地面。
HTML Div的是笨重,不结垢,使一个圆圈是唯一可能与圆角,使得复杂的形状是可能的,但涉及到数百个微小的微小像素宽的div 。疯狂随之而来。
 
本文由免费oa系统78oa原创,转载请注明出处。