HTML5画布与SVG与div

Question

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

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

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

Answer 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。疯狂随之而来。