Javascript Svg与圆形对象的画布和渲染时间

所以我做了一个网页，测试SVG和画布的渲染时间。测试针对不同的浏览器进行。我认为Canvas会比SVG更好，但从测试中我发现Canvas在更大的对象和圆形对象方面存在问题。我在这里有我的测试结果：

-这是针对50.000个矩形（a=500像素）的RESLT

-这是r=250像素的50000个圆的结果

我使用简单的代码在页面上生成对象。 画布：

---

这就是为什么我问自己，如果我说“渲染时间”的话没有错的话，你不能从测试中推断svg比canvas快或慢，原因有几个：

次要原因：

• 无需关闭路径，尤其是在填充后
• 在画布的每个循环上重新计算开始/结束角度
• fillStyle必须在画布而不是svg中转换为“rgb（…）”

更重要的原因是：

• 在1000X1000画布上绘制半径为500的50.000画布会导致每像素透支 属于78500 !!! 这与真正的用例无关，这非常烦人 从中得出任何结论

更重要的原因是：

• 您不同步绘制（使用requestAnimationFrame），因此可以肯定的是，您的画布代码经常等待其缓冲区能够绘制

杀人原因：

• 您不测量svg的渲染时间，只测量svg创建+添加到DOM的时间。
  svg循环中没有绘制一个像素：实际渲染将在javascript代码返回后执行：只有这样它才会看到需要回流，并重新绘制所有内容。
  AFAIK每个浏览器对于一个页面上的所有操作只有一个线程：因此，您的程序将完全停止渲染，这段时间您目前还无法测量

Rq：您可以尝试通过使用一个短的setInterval来测量svg绘制时间，并查看两次调用之间实际经过的次数，而不是实际的时间间隔：这是系统在渲染时卡住的时间

---

底线：您正在比较创建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;