小编典典

HTML5画布与SVG与div

javascript

即时创建元素并能够移动元素的最佳方法是什么?例如,假设我要创建一个矩形,圆形和多边形,然后选择这些对象并四处移动。

我了解HTML5提供了三个使之成为可能的元素:svg,canvas和div。对于我想做什么,这些元素中的哪一个将提供最佳性能?

为了比较这些方法,我正在考虑创建三个视觉上相同的网页,每个网页中都有页眉,页脚,小部件和文本内容。第一页中的小部件将完全使用canvas元素创建,第二页中的完全使用svg元素创建,而第三页中的使用简单div元素HTML和CSS创建。


阅读 1156

收藏
2020-05-01

共1个答案

小编典典

简短的答案:

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中,绘图/加载速度更快,并且还有更多的优化空间(即,排除屏幕外的内容非常容易)。

结论:

  • SVG可能更适合应用程序和项目很少的应用程序(少于1000个?取决于实际情况)
  • Canvas对于成千上万的对象和仔细的操作来说是更好的选择,但是要使它投入使用,还需要更多的代码(或库)。
  • HTML Divs笨拙且无法缩放,仅可以使用圆角制作一个圆形,可以制作复杂的形状,但涉及数百个微小的像素级div。疯狂随之而来。
2020-05-01