Javascript Svg与圆形对象的画布和渲染时间
所以我做了一个网页,测试SVG和画布的渲染时间。测试针对不同的浏览器进行。我认为Canvas会比SVG更好,但从测试中我发现Canvas在更大的对象和圆形对象方面存在问题。我在这里有我的测试结果: -这是针对50.000个矩形(a=500像素)的RESLT -这是r=250像素的50000个圆的结果 我使用简单的代码在页面上生成对象。 画布:Javascript Svg与圆形对象的画布和渲染时间,javascript,html,canvas,svg,Javascript,Html,Canvas,Svg,所以我做了一个网页,测试SVG和画布的渲染时间。测试针对不同的浏览器进行。我认为Canvas会比SVG更好,但从测试中我发现Canvas在更大的对象和圆形对象方面存在问题。我在这里有我的测试结果: -这是针对50.000个矩形(a=500像素)的RESLT -这是r=250像素的50000个圆的结果 我使用简单的代码在页面上生成对象。 画布: 这就是为什么我问自己,如果我说“渲染时间”的话没有错的话,你不能从测试中推断svg比canvas快或慢,原因有几个: 次要原因: 无需关闭路径,尤其是在
这就是为什么我问自己,如果我说“渲染时间”的话没有错的话,你不能从测试中推断svg比canvas快或慢,原因有几个: 次要原因:
- 无需关闭路径,尤其是在填充后
- 在画布的每个循环上重新计算开始/结束角度李>
- fillStyle必须在画布而不是svg中转换为“rgb(…)”李>
- 在1000X1000画布上绘制半径为500的50.000画布会导致每像素透支 属于78500 !!! 这与真正的用例无关,这非常烦人 从中得出任何结论李>
- 您不同步绘制(使用requestAnimationFrame),因此可以肯定的是,您的画布代码经常等待其缓冲区能够绘制李>
- 您不测量svg的渲染时间,只测量svg创建+添加到DOM的时间。
svg循环中没有绘制一个像素:实际渲染将在javascript代码返回后执行:只有这样它才会看到需要回流,并重新绘制所有内容。
AFAIK每个浏览器对于一个页面上的所有操作只有一个线程:因此,您的程序将完全停止渲染,这段时间您目前还无法测量
底线:您正在比较创建DOM对象并将其添加到文档的时间与在不同步画布上渲染圆的时间。从这些数字中无法得出结论
var ctx = document.getElementById('canvas').getContext('2d');
for(var i=0;i<50000;i++){
ctx.beginPath();
var centreX = Math.random() * 1000;
var centreY = Math.random() * 1000;
var radius = 50;
var startAngle = 0 * Math.PI/180;
var endAngle = 360 * Math.PI/180;
ctx.arc(centreX,centreY,radius,startAngle,endAngle,false);
ctx.fillStyle = "rgb("+Math.floor(Math.random()*256)+","+ Math.floor(Math.random()*256)+","+ Math.floor(Math.random()*256)+")";;
ctx.fill();
ctx.closePath();
}
for (var i = 0; i < 50000; i++) {
var x = Math.random() * 1000,
y = Math.random() * 1000;
var circ = document.createElementNS(svgns, 'circle');
circ.setAttributeNS(null, 'cx', x);
circ.setAttributeNS(null, 'cy', y);
circ.setAttributeNS(null, 'r', 50);
circ.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16));
document.getElementById('svgOne').appendChild(circ);
}
befTime = (new Date()).getTime();
{
(drawing function)
}
var actTime = (new Date()).getTime();
var testTime = (actTime-befTime)/1000;