javascript - Svg vs Canvas 和圆形对象的渲染时间

Question

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

http://lezag2.linuxpl.info/wykresT2.html - 这是 50.000 个矩形的结果，a=500 像素

http://lezag2.linuxpl.info/wykresT4.html - 这是 50.000 个圆圈的结果，r=250 像素

我使用简单的代码在页面上生成对象。 Canvas :

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();
}

和 SVG:

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);
}

我想知道为什么 Canvas 与 SVG 相比有如此糟糕的时期。我试着用谷歌搜索我的问题，但只发现了非常复杂的测试。有人能解释一下为什么 Canvas 有这么糟糕的时期吗？我还把它命名为好 - 我的意思是渲染时间？？

编辑

我忘了展示我是如何测量渲染时间的。

befTime = (new Date()).getTime();
{
(drawing function)
}
var actTime = (new Date()).getTime(); 
var testTime = (actTime-befTime)/1000; 

这就是为什么我问我说“渲染时间”是不是说错了

Answer 1

由于以下几个原因，您不能从测试中推断出 svg 比 canvas 快或慢:

次要原因:

• closePath 不是必需的，尤其是在填充之后。
• 您重新计算 Canvas 每个循环的开始/结束 Angular 。
• fillStyle 必须在 canvas 中转换为“rgb(...)”，而不是在 svg 中。

更重要的原因:

• 在 1000X1000 Canvas 上绘制半径为 500 的 50.000 Canvas 会导致每像素 overdraw 的... 78500 !!!这与实际用例无关，这很烦人从中得出任何结论。

更重要的原因:

• 您没有同步绘制(使用 requestAnimationFrame)，因此可以肯定您的 Canvas 代码经常在等待其缓冲区能够绘制。

杀人原因:

• 您不测量 svg 的渲染时间，只测量 svg 创建 + 添加到 DOM 的时间。
  在您的 svg 循环中没有绘制任何像素:实际渲染将在 之后 javascript 代码返回:只有到那时它才会看到需要重排，然后重新绘制所有内容。
  据我所知，每个浏览器都只有一个线程用于页面上的所有操作:因此您的程序将完全停止渲染，在您目前尚未测量的时间内。

Rq:您可以尝试使用较短的 setInterval 来测量 svg 绘制时间，并查看两次调用之间实际经过了多少次而不是实际间隔:这是系统卡住渲染的时间。

---

底线:您正在比较创建 DOM 对象并将它们添加到文档的时间与在不同步的 Canvas 上渲染圆圈的时间。无法从这些数字中得出任何结论。

---