基准测试高图表，D3和画布绘图

Question

我们正在尝试为我们的应用程序选择SVG（HighCharts，D3）或Canvas。绘图效率对我们来说至关重要。所以我对rect图做了一个非常简单的基准测试。请检查：

• 高图表 1000 个矩形
• D3 1000 个矩形
• 画布 1000 个矩形

事实证明，Highcharts花费大约900ms来绘制，D3花费大约50ms~70ms，而Canvas花费~1ms来绘制（检查console.log）。

我预计 SVG 可能比 Canvas 慢。但我万万没想到差距这么大。更糟糕的是，如果我将迭代次数更改为 10000，Canvas 会在 10 毫秒内完成，而 SVG 运行大约 28 秒!!我们的应用程序不会有这么多对象，但如果我们想向上扩展，这种性能是不可接受的。

我做错了什么吗？如何为 SVG 编写更高效的代码？SVG 导出功能对我们来说也很重要。

Answer 1

您应该比较渲染相同的对象，而不是初始化完整图表并使用渲染器。在此方案中，应使用此解决方案：

http://jsfiddle.net/jxpSk/2/

$(function () {
        var startTime = $.now();
        var ren = new Highcharts.Renderer($('#container')[0],600,1000);
        for (var i = 0; i < 1000; i++) {
            ren.rect(i, i, 100, 100, 0).attr({
                fill: '#FF0000'
            }).add();
        }
        var endTime = $.now();
        console.log('Time: ' + (endTime - startTime));
    });

然后会更客观。