我们正在尝试为我们的应用程序选择 SVG(HighCharts、D3)或 Canvas。绘图效率对我们来说至关重要。所以我对 rect
绘图做了一个非常简单的基准测试。请检查:
事实证明,highcharts 花费大约 900 毫秒来绘制,D3 花费大约 50 毫秒到 70 毫秒,而 Canvas 花费大约 1 毫秒来绘制(检查 console.log
)。
我预计 SVG 可能比 Canvas 慢。但没想到差距这么大。更糟糕的是,如果我将迭代次数更改为 10000,Canvas 在 10 毫秒内完成,而 SVG 运行大约 28 秒!!!我们的应用程序不会有那么多对象,但如果我们想向上扩展,这种性能是 Not Acceptable 。
我做错了什么吗?如何为 SVG 编写更高效的代码? SVG 导出功能对我们也很重要。
最佳答案
您应该比较渲染同一对象,而不是初始化完整图表和使用渲染器。在这种情况下,您应该使用此解决方案:
$(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));
});
然后会更客观。
关于canvas - 对 HighCharts、D3 和 Canvas 绘图进行基准测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22057616/