在飞翔上创建元素并能够移动它们的最佳方法是什么？例如，假设我想创建一个矩形、圆形和多边形，然后 Select 这些对象并移动它们.
我知道HTML5提供了三个元素，可以实现这一点:div8/embedded-content-0.html#svg" rel="noreferrer">svg、div8/scripting-1.html#the-canvas-element" rel="noreferrer">canvas和div.对于我想做的事情，这些元素中哪一个将提供最好的性能？
为了比较这些方法，我考虑创建三个视觉上完全相同的网页，每个网页都有页眉、页脚、小部件和文本内容.第一个页面中的小部件将完全由canvas元素创建，第二个完全由svg元素创建，第三个完全由纯div元素、HTML和CSS创建.
SVG对于您来说应该是easier，因为已经内置了 Select 和移动它.SVG对象是DOM对象，因此它们有"单击"处理程序等.
DIV还可以，但笨重，有awful个性能负载.
Canvas具有最好的性能，但您必须自己实现托管状态(对象 Select 等)的所有概念，或者使用库.
HTML5画布只是一个位图的绘图表面.你设置好画图(比如用 colored颜色 和线条粗细)，画那个东西，然后画布对那个东西一无所知:它不知道它在哪里，或者你刚刚画的是什么，它只是像素.如果你想画矩形，让它们四处移动或是可 Select 的，那么你必须从头开始编写所有的代码，including个代码来记住你画了它们.
另一方面，SVG必须维护对其渲染的每个对象的引用.您创建的每个SVG/VML元素都是DOM中的真实元素.默认情况下，这允许您更好地跟踪所创建的元素，并在默认情况下使处理鼠标事件之类的事情变得更容易，但当存在大量对象时，速度会显著降低
这些SVG DOM引用意味着处理您绘制的东西的一些步骤是为您完成的.SVG在渲染really large个对象时速度更快，但在渲染many个对象时速度较慢.
在画布上玩游戏可能会更快.在SVG中，大型 map 程序可能会更快.如果你真的想使用Canvas，我有一些教程介绍如何启动和运行here个可移动对象.
Canvas会更好地处理更快的事情和繁重的位图操作(比如动画)，但如果你想要更多的交互性，它会占用更多的代码.
我在HTML DIV制作的绘图和画布制作的绘图上运行了一大堆数字.我可以用很长的篇幅来说明每种测试的好处，但我会给出一些相关的测试结果，供您考虑具体的应用:
我制作了Canvas和HTMLDiv测试页面，它们都有可移动的" node "画布 node 是我在Javascript中创建并跟踪的对象.HTML node 是可移动的div.
我在两个测试中都添加了100000个 node .他们的表现截然不同:
加载HTML测试选项卡花费了很长时间(时间略低于5分钟，Chrome第一次要求终止页面).Chrome的任务管理器说标签页占用了168MB.当我看着它的时候，它占用了12-13%的CPU时间，当我不看的时候，占用了0%的CPU时间.
画布选项卡在一秒内加载，占用30MB.无论用户是否正在查看它，它都会一直占用CPU时间的13%.(2013 edit: They've mostly fixed that)个
在HTML页面上拖动会更平滑，这是设计所期望的，因为当前的设置是在画布测试中每隔30毫秒重新绘制所有内容.为此，Canvas有很多优化.(画布失效是最简单的，也包括裁剪区域、 Select 性重画等.这取决于您想要实现的程度)
毫无疑问，在这个简单的测试中，您可以让Canvas在对象操作方面比Div更快，当然在加载时间方面也要快得多.在画布中绘制/加载速度更快，并且有更大的优化空间(即，排除屏幕外的内容非常容易).