即时创建元素并能够移动元素的最佳方法是什么?例如,假设我要创建一个矩形,圆形和多边形,然后选择这些对象并四处移动。
我了解HTML5提供了三个使之成为可能的元素:svg,canvas和div。对于我想做什么,这些元素中的哪一个将提供最佳性能?
为了比较这些方法,我正在考虑创建三个视觉上相同的网页,每个网页中都有页眉,页脚,小部件和文本内容。第一页中的小部件将完全使用canvas元素创建,第二页中的完全使用svg元素创建,而第三页中的使用简单div元素HTML和CSS创建。
canvas
svg
div
SVG 对您来说将 更加容易 ,因为已经内置了选择和移动它的功能。SVG对象是DOM对象,因此它们具有“ click”处理程序等。
DIV可以,但是笨重,并且在大量情况下具有 糟糕的 性能。
Canvas具有最佳的性能,但您必须自己实现托管状态的所有概念(对象选择等),或使用库。
HTML5Canvas只是位图的绘图表面。您设置绘制(用颜色和线条粗细说),绘制该东西,然后Canvas不知道该东西:它不知道它在哪里或刚刚绘制的是什么,它是只是像素。如果要绘制矩形并使其移动或可以选择,则必须从头开始编写所有代码, 包括 要记住已绘制矩形的代码。
另一方面,SVG必须维护对其呈现的每个对象的引用。您创建的每个SVG/VML元素都是DOM中的真实元素。默认情况下,这使您可以更好地跟踪所创建的元素,并默认情况下使处理鼠标事件之类的事情变得更容易,但是当存在大量对象时,它会显着降低速度
这些SVG DOM参考意味着处理您绘制的事物的一些步法工作已为您完成。渲染 非常大的 对象时,SVG更快,但是渲染 许多 对象时,SVG则更慢。
在Canvas中,游戏可能会更快。大型地图程序在SVG中可能会更快。
对于更快的事物和繁重的位图操作(例如动画),Canvas会更好,但是如果您需要大量的交互性,Canvas将需要更多的代码。
我在用HTMLDIV绘制的图形和通过Canvas绘制的图形上运行了大量数字。我可以就每种产品的优势发表大量文章,但是我将给出一些测试的相关结果,以供您针对特定应用进行考虑:
我制作了Canvas和HTMLDIV测试页,它们都有可移动的“节点”。画布节点是我创建的对象,并使用Javascript进行跟踪。HTML节点是可移动的Div。
我向两个测试的每一个添加了100,000个节点。他们的表现截然不同:
HTML测试标签花费了很多时间(时间略少于5分钟,chrome要求第一次杀死该页面)。Chrome的任务管理器说,该标签占用了168MB。当我查看时,它占用12-13%的CPU时间,当我不查看时,它占用0%的CPU时间。
“画布”选项卡在一秒钟内加载,占用30MB。不管是否有人看着它,它一直都在占用CPU时间的13%。
在HTML页面上拖动更平滑,这是设计所期望的,因为当前设置是在Canvas测试中每30毫秒重绘所有内容。为此,Canvas有很多优化。(画布无效是最容易的,还有裁剪区域,选择性重绘等。这仅取决于您想要实现的程度)
毫无疑问,在这个简单的测试中,您可以使Canvas在对象操作上像divs更快,并且在加载时间上当然要快得多。在Canvas中,绘图/加载速度更快,并且还有更多的优化空间(即,排除屏幕外的内容非常容易)。