为了补充这一点，我一直在做一个图表应用程序，最初是从画布开始的。该图由许多节点组成，而且它们可以变得相当大。用户可以在图中拖动元素。

我发现，在我的Mac上，对于非常大的图像，SVG更好。我有一台MacBook Pro 2013 13英寸Retina，它在下面的操作非常好。图像是6000x6000像素，有1000个对象。当用户在图中拖动对象时，canvas中的类似结构对我来说是不可能进行动画化的。

在现代显示器上，您还必须考虑不同的分辨率，在这里SVG免费为您提供了所有这些。

小提琴:http://jsfiddle.net/knutsi/PUcr8/16/

全屏:http://jsfiddle.net/knutsi/PUcr8/16/embedded/result/

var wiggle_factor = 0.0;
nodes = [];

// create svg:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'border: 1px solid black');
svg.setAttribute('width', '6000');
svg.setAttribute('height', '6000');

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
    "http://www.w3.org/1999/xlink");

document.body.appendChild(svg);


function makeNode(wiggle) {
    var node = document.createElementNS("http://www.w3.org/2000/svg", "g");
    var node_x = (Math.random() * 6000);
    var node_y = (Math.random() * 6000);
    node.setAttribute("transform", "translate(" + node_x + ", " + node_y +")");

    // circle:
    var circ = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circ.setAttribute( "id","cir")
    circ.setAttribute( "cx", 0 + "px")
    circ.setAttribute( "cy", 0 + "px")
    circ.setAttribute( "r","100px");
    circ.setAttribute('fill', 'red');
    circ.setAttribute('pointer-events', 'inherit')

    // text:
    var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.textContent = "This is a test! ÅÆØ";

    node.appendChild(circ);
    node.appendChild(text);

    node.x = node_x;
    node.y = node_y;

    if(wiggle)
        nodes.push(node)
    return node;
}

// populate with 1000 nodes:
for(var i = 0; i < 1000; i++) {
    var node = makeNode(true);
    svg.appendChild(node);
}

// make one mapped to mouse:
var bnode = makeNode(false);
svg.appendChild(bnode);

document.body.onmousemove=function(event){
    bnode.setAttribute("transform","translate(" +
        (event.clientX + window.pageXOffset) + ", " +
        (event.clientY + window.pageYOffset) +")");
};

setInterval(function() {
    wiggle_factor += 1/60;
    nodes.forEach(function(node) {

        node.setAttribute("transform", "translate(" 
                          + (Math.sin(wiggle_factor) * 200 + node.x) 
                          + ", " 
                          + (Math.sin(wiggle_factor) * 200 + node.y) 
                          + ")");        
    })
},1000/60);

虽然上面的大多数答案仍然有一定的道理，但我认为它们值得更新:

Over the years the performance of SVG has improved a lot and now there is hardware-accelerated CSS transitions and animations for SVG that do not depend on JavaScript performance at all. Of course JavaScript performance has improved, too and with it the performance of Canvas, but not as much as SVG got improved. Also there is a "new kid" on the block that is available in almost all browsers today and that is WebGL. To use the same words that Simon used above: It beats both Canvas and SVG hands down. This doesn't mean it should be the go-to technology, though, since it's a beast to work with and it is only faster in very specific use-cases.

恕我直言，对于今天的大多数用例，SVG提供了最好的性能/可用性比率。可视化需要非常复杂(就元素数量而言)，同时又非常简单(每个元素)，这样Canvas和WebGL才能真正发挥作用。

在这个类似问题的答案中，我提供了更多的细节，为什么我认为这三种技术的组合有时是最好的选择。

For your purposes, I recommend using SVG, since you get DOM events, like mouse handling, including drag and drop, included, you don't have to implement your own redraw, and you don't have to keep track of the state of your objects. Use Canvas when you have to do bitmap image manipulation and use a regular div when you want to manipulate stuff created in HTML. As to performance, you'll find that modern browsers are now accelerating all three, but that canvas has received the most attention so far. On the other hand, how well you write your javascript is critical to getting the most performance with canvas, so I'd still recommend using SVG.

它们都有好的方面和坏的方面，下面我们来比较一下。

Canvas将具有最佳的整体性能，但前提是您正确使用它。

Divs:

良好的性能 您可以使用DOM操作它 您可以访问DOM事件 CSS支持 很难做出复杂的形状

性能测试:https://kajam.hg0428.repl.co/pref/

帆布:

更好的形状支撑 伟大的成就 强大的浏览器支持 没有CSS

性能测试:https://js-game-engine.hg0428.repl.co/canvasTest/preform.html

svg:

更好的形状支撑 更难使用 良好的浏览器支持 没有CSS，但有很多不同的SVG 糟糕的性能

我还没有对此进行性能测试，但根据其他测试，它并不好。

要使Canvas快速:

Canvas可以具有非常动态的性能，因此让我们回顾一些技巧。 避免使用ctx。Rect和ctx。填充，使用ctx。fillRect代替，这是最大的一个，它可以毁掉即使是最简单的游戏。 不要使用填充和描边的形状，而是使用填充[形状]。

如果你不记得在使用canvas时，你的游戏将会非常慢。这是我从经验中学到的。

为了补充这一点，我一直在做一个图表应用程序，最初是从画布开始的。该图由许多节点组成，而且它们可以变得相当大。用户可以在图中拖动元素。

我发现，在我的Mac上，对于非常大的图像，SVG更好。我有一台MacBook Pro 2013 13英寸Retina，它在下面的操作非常好。图像是6000x6000像素，有1000个对象。当用户在图中拖动对象时，canvas中的类似结构对我来说是不可能进行动画化的。

在现代显示器上，您还必须考虑不同的分辨率，在这里SVG免费为您提供了所有这些。

小提琴:http://jsfiddle.net/knutsi/PUcr8/16/

全屏:http://jsfiddle.net/knutsi/PUcr8/16/embedded/result/

var wiggle_factor = 0.0;
nodes = [];

// create svg:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'border: 1px solid black');
svg.setAttribute('width', '6000');
svg.setAttribute('height', '6000');

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
    "http://www.w3.org/1999/xlink");

document.body.appendChild(svg);


function makeNode(wiggle) {
    var node = document.createElementNS("http://www.w3.org/2000/svg", "g");
    var node_x = (Math.random() * 6000);
    var node_y = (Math.random() * 6000);
    node.setAttribute("transform", "translate(" + node_x + ", " + node_y +")");

    // circle:
    var circ = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circ.setAttribute( "id","cir")
    circ.setAttribute( "cx", 0 + "px")
    circ.setAttribute( "cy", 0 + "px")
    circ.setAttribute( "r","100px");
    circ.setAttribute('fill', 'red');
    circ.setAttribute('pointer-events', 'inherit')

    // text:
    var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.textContent = "This is a test! ÅÆØ";

    node.appendChild(circ);
    node.appendChild(text);

    node.x = node_x;
    node.y = node_y;

    if(wiggle)
        nodes.push(node)
    return node;
}

// populate with 1000 nodes:
for(var i = 0; i < 1000; i++) {
    var node = makeNode(true);
    svg.appendChild(node);
}

// make one mapped to mouse:
var bnode = makeNode(false);
svg.appendChild(bnode);

document.body.onmousemove=function(event){
    bnode.setAttribute("transform","translate(" +
        (event.clientX + window.pageXOffset) + ", " +
        (event.clientY + window.pageYOffset) +")");
};

setInterval(function() {
    wiggle_factor += 1/60;
    nodes.forEach(function(node) {

        node.setAttribute("transform", "translate(" 
                          + (Math.sin(wiggle_factor) * 200 + node.x) 
                          + ", " 
                          + (Math.sin(wiggle_factor) * 200 + node.y) 
                          + ")");        
    })
},1000/60);

了解SVG和Canvas之间的区别将有助于选择正确的格式。

帆布

分辨率的依赖 不支持事件处理程序 糟糕的文本渲染能力 您可以将生成的图像保存为.png或.jpg 非常适合图像密集型游戏

SVG

分辨率独立 支持事件处理程序 最适合具有大渲染区域的应用程序(谷歌Maps) 如果复杂，呈现速度会很慢(任何大量使用DOM的东西都会如此) 慢) 不适合游戏应用