javascript - HTML5 Canvas vs. SVG vs. div

Question

动态创建元素并能够移动它们的最佳方法是什么？例如，假设我想创建一个矩形、圆形和多边形，然后选择这些对象并移动它们。

我知道 HTML5 提供了三个元素来实现这一点:svg , canvas和 div .对于我想做的事情，其中​​哪一个元素将提供最佳性能？

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

Answer 1

简短的回答:

SVG 对您来说会更容易，因为已经内置了选择和移动它。SVG 对象是 DOM 对象，因此它们具有“单击”处理程序等。

DIV 还可以，但很笨重，并且在大量加载时性能很差。

Canvas 具有最好的性能，但您必须自己实现托管状态(对象选择等)的所有概念，或者使用库。

长答案:

HTML5 Canvas 只是位图的绘图表面。您设置绘制(例如用颜色和线条粗细)，绘制那个东西，然后 Canvas 不知道那个东西:它不知道它在哪里，也不知道你刚刚画的是什么，它是只是像素。如果您想绘制矩形并让它们四处移动或可选择，那么您必须从头开始编写所有这些代码，包括记住您绘制它们的代码。

另一方面，SVG 必须维护对其呈现的每个对象的引用。您创建的每个 SVG/VML 元素都是 DOM 中的真实元素。默认情况下，这允许您更好地跟踪您创建的元素，并且默认情况下更容易处理鼠标事件等事情，但是当有大量对象时它会显着减慢

那些 SVG DOM 引用意味着处理您绘制的事物的一些步骤是为您完成的。 SVG 在渲染非常大的对象时速度更快，但在渲染许多对象时速度较慢。

在 Canvas 中游戏可能会更快。一个巨大的 map 程序在 SVG 中可能会更快。如果您确实想使用 Canvas，我有一些关于启动和运行可移动对象的教程 here .

Canvas 对于更快的事情和繁重的位图操作(如动画)会更好，但如果你想要大量的交互性，它将需要更多的代码。

我在 HTML DIV 制作的绘图与 Canvas 制作的绘图上运行了一堆数字。我可以就每种方法的好处发表一篇大文章，但我会给出一些我的测试的相关结果，以供您针对您的特定应用考虑:

我制作了 Canvas 和 HTML DIV 测试页面，它们都有可移动的“节点”。 Canvas 节点是我在 Javascript 中创建并跟踪的对象。 HTML 节点是可移动的 Div。

我为我的两个测试中的每一个添加了 100,000 个节点。他们的表现截然不同:

HTML 测试选项卡需要很长时间才能加载(时间略低于 5 分钟，chrome 第一次要求终止该页面)。 Chrome 的任务管理器说该选项卡占用了 168MB。当我看它时，它占用了 12-13% 的 CPU 时间，当我不看它时，它占用了 0%。

Canvas 选项卡在一秒钟内加载，占用 30MB。它也一直占用 13% 的 CPU 时间，无论是否有人在看它。 (2013 年编辑:他们基本上已经解决了这个问题)

在 HTML 页面上拖动更顺畅，这是设计所期望的，因为当前设置是在 Canvas 测试中每 30 毫秒重绘所有内容。为此，Canvas 有很多优化。 ( Canvas 失效是最简单的，还有裁剪区域、选择性重绘等。这取决于你想实现的程度)

毫无疑问，在这个简单的测试中，您可以让 Canvas 在对象操作方面像 div 一样更快，当然在加载时间上也快得多。 Canvas 中的绘图/加载速度更快，并且还有更多的优化空间(即，排除屏幕外的内容非常容易)。

结论:

SVG 可能更适合项目少的应用程序和应用程序(少于 1000 个？真的取决于)

Canvas 更适合成千上万的对象和仔细的操作，但需要更多的代码(或库)才能让它落地。

HTML div 很笨重且无法缩放，只能用圆 Angular 制作圆形，制作复杂的形状是可能的，但涉及数百个微小的像素宽 div。疯狂随之而来。