Question

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

http://lezag2.linuxpl.info/wykresT2.html - 这是对于具有= 500个像素的

的50.000个矩形的重新分析

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

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

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相比有这么糟糕的时期。我试图谷歌我的问题，但发现只有非常comlpex测试。有人可以解释一下为什么帆布有这么糟糕的时代吗？我也说得好 - 我的意思是渲染时间??

修改

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

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

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

Answer 1

您无法从测试中推断svg比canvas更快或更慢，原因如下：

次要原因：

closePath不是必需的，特别是填写后。
您在画布的每个循环上重新计算开始/结束角度。
fillStyle必须在画布中转换为'rgb（...）'，而不是在svg中转换。

更重要的原因：

在1000X1000画布上绘制50,000个半径为500的画布，导致每像素过度绘制 ... 78500 !!!这与实际用例无关，这非常烦人得出任何结论。

更重要的原因：

你没有同步绘制（使用requestAnimationFrame），因此可以肯定你的画布代码经常在等待它的缓冲区能够绘制。

杀人原因：

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

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

结论：您正在比较创建DOM对象的时间并将它们添加到文档中，而不是在不同步的画布上渲染圆圈的时间。没有结论可以从这些数字中得出结论。

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

1 个答案: