canvas - 对 HighCharts、D3 和 Canvas 绘图进行基准测试

Question

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

• HighCharts 1000 rectangles
• D3 1000 rectangles
• Canvas 1000 rectangles

事实证明，highcharts 花费大约 900 毫秒来绘制，D3 花费大约 50 毫秒到 70 毫秒，而 Canvas 花费大约 1 毫秒来绘制(检查 console.log)。

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

我做错了什么吗？如何为 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));
    });

然后会更客观。