HTML5 Canvas vs. SVG vs. div [英] HTML5 Canvas vs. SVG vs. div
问题描述
动态创建元素并能够移动它们的最佳方法是什么？例如，假设我想创建一个矩形，圆形和多边形，然后选择这些对象并将它们移动。
据我所知，HTML5提供了三个可以使这可能是： svg ， 画布和< a href =http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element =noreferrer> div 。对于我想要做的，哪一个元素将提供最佳性能？
为了比较这些方法，我想创建三个视觉上相同的网页，每个网页都是有一个页眉，页脚，小部件和文本内容。第一页中的小部件完全由 canvas 元素创建，第二个完全由 svg 元素创建，并且第三个是普通的 div 元素，HTML和CSS。
简短回答：
SVG对你来说更容易，因为已经内置了选择和移动它。SVG对象是DOM对象，所以他们有点击处理程序等。
DIV是可以的，但很笨拙，而且大量的糟糕的性能加载。
Canvas具有最佳性能，但您必须自己实现所有管理状态（对象选择等）的概念，或者使用库。
长答案：HTML5 Canvas只是位图的绘图表面。你设置画出（用颜色和线条粗细说出），画出那个东西，然后画布不知道那件事：它不知道它在哪里或者你刚才画的是什么，它是只是像素。如果你想绘制矩形并让它们四处移动或者可以选择，那么你必须从头开始对所有这些进行编码，包括代码以记住你画的那些。
另一方面，SVG必须保持对它呈现的每个对象的引用。您创建的每个SVG / VML元素都是DOM中的一个真实元素。默认情况下，这可以让你更好地跟踪你创建的元素，并且默认情况下更容易处理像鼠标事件这样的事情，但是当有大量对象时，它会显着减速
那些SVG DOM引用意味着处理你绘制的东西的一些步骤是为你完成的。当渲染真的很大对象时，SVG速度更快，但渲染多个对象时速度更慢。
在Canvas中更快。一个巨大的地图程序在SVG中可能会更快。如果您确实想使用Canvas，我有一些关于启动和运行可移动对象的教程这里。
画布对于更快速的事情和繁重的位图操作（如动画）会更好，但如果您需要大量的交互操作，则需要更多的代码。 / p>
我在HTML DIV制作的绘图和Canvas制作的绘图上运行了一堆数字。我可以写一篇关于每个好处的大文章，但我会给出我的测试的一些相关结果，以针对您的特定应用程序进行考虑：
我制作了Canvas和HTML DIV测试页面，都有可移动的节点。画布节点是我创建的对象，并用Javascript保持跟踪。 HTML节点是可移动的Div。
我为每个测试添加了100,000个节点。他们的表现完全不同：
HTML测试标签永久加载（定时稍微低于5分钟，chrome被要求首次杀死该页面）。 Chrome的任务管理器表示该选项卡占用了168MB。它占用了12-13％的CPU时间，当我看的时候，0％，当我不看。
Canvas标签在一秒钟内加载并占用30MB 。无论是否正在查看，它总是占用CPU时间的13％。 （2013年编辑：他们已经修复了这个问题）
在HTML页面上拖动更加平滑，这是设计所期望的，当前设置是在Canvas测试中每30毫秒重绘一次。 Canvas有很多优化可供选择。 （canvas无效是最简单的，也是裁剪区域，选择性重绘等等，只是取决于你实现的感觉）
毫无疑问，你可以获得Canvas在这个简单的测试中，对象操作的速度要快于div，而且在加载时间上要快得多。在Canvas中绘图/加载速度更快，并且还有更多的优化空间（也就是说，排除非屏幕的东西非常容易）。
结论： h2>- SVG对于应用程序和少量应用程序（低于1000？真的取决于）的应用程序和应用程序可能会更好
- Canvas对于数千个对象和小心操作来说是更好的选择，但需要更多的代码（或库）才能实现它。 HTML div非常笨重且不能缩放，只有圆角才能实现圆形，使复杂的形状成为可能，但涉及数百个微小的像素宽度的div。疯狂随之而来。
What is the best approach for creating elements on the fly and being able to move them around? For example, let's say I want to create a rectangle, circle and polygon and then select those objects and move them around.
I understand that HTML5 provides three elements that can make this possible: svg, canvas and div. For what I want to do, which one of those elements will provide the best performance?
To compare these approaches, I was thinking of creating three visually identical web pages that each have a header, footer, widget and text content in them. The widget in the first page would be created entirely with the canvas element, the second entirely with the svg element, and the third with the plain div element, HTML and CSS.
The short answer:
SVG would be easier for you, since selection and moving it around is already built in. SVG objects are DOM objects, so they have "click" handlers, etc.
DIVs are okay but clunky and have awful performance loading at large numbers.
Canvas has the best performance hands-down, but you have to implement all concepts of managed state (object selection, etc) yourself, or use a library.
The long answer:
HTML5 Canvas is simply a drawing surface for a bit-map. You set up to draw (Say with a color and line thickness), draw that thing, and then the Canvas has no knowledge of that thing: It doesn't know where it is or what it is that you've just drawn, it's just pixels. If you want to draw rectangles and have them move around or be selectable then you have to code all of that from scratch, including the code to remember that you drew them.
SVG on the other hand must maintain references to each object that it renders. Every SVG/VML element you create is a real element in the DOM. By default this allows you to keep much better track of the elements you create and makes dealing with things like mouse events easier by default, but it slows down significantly when there are a large number of objects
Those SVG DOM references mean that some of the footwork of dealing with the things you draw is done for you. And SVG is faster when rendering really large objects, but slower when rendering many objects.
A game would probably be faster in Canvas. A huge map program would probably be faster in SVG. If you do want to use Canvas, I have some tutorials on getting movable objects up and running here.
Canvas would be better for faster things and heavy bitmap manipulation (like animation), but will take more code if you want lots of interactivity.
I've run a bunch of numbers on HTML DIV-made drawing versus Canvas-made drawing. I could make a huge post about the benefits of each, but I will give some of the relevant results of my tests to consider for your specific application:
I made Canvas and HTML DIV test pages, both had movable "nodes." Canvas nodes were objects I created and kept track of in Javascript. HTML nodes were movable Divs.
I added 100,000 nodes to each of my two tests. They performed quite differently:
The HTML test tab took forever to load (timed at slightly under 5 minutes, chrome asked to kill the page the first time). Chrome's task manager says that tab is taking up 168MB. It takes up 12-13% CPU time when I am looking at it, 0% when I am not looking.
The Canvas tab loaded in one second and takes up 30MB. It also takes up 13% of CPU time all of the time, regardless of whether or not one is looking at it. (2013 edit: They've mostly fixed that)
Dragging on the HTML page is smoother, which is expected by the design, since the current setup is to redraw EVERYTHING every 30 milliseconds in the Canvas test. There are plenty of optimizations to be had for Canvas for this. (canvas invalidation being the easiest, also clipping regions, selective redrawing, etc.. just depends on how much you feel like implementing)
There is no doubt you could get Canvas to be faster at object manipulation as the divs in that simple test, and of course far faster in the load time. Drawing/loading is faster in Canvas and has far more room for optimizations, too (ie, excluding things that are off-screen is very easy).
Conclusion:
- SVG is probably better for applications and apps with few items (less than 1000? Depends really)
- Canvas is better for thousands of objects and careful manipulation, but a lot more code (or a library) is needed to get it off the ground.
- HTML Divs are clunky and do not scale, making a circle is only possible with rounded corners, making complex shapes is possible but involves hundreds of tiny tiny pixel-wide divs. Madness ensues.
这篇关于HTML5 Canvas vs. SVG vs. div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
