Svg vs Canvas和循環對象的渲染時間

Question

所以我做了一個測試SVG和Canvas渲染時間的網頁。測試是爲不同的瀏覽器完成的。我認爲Canvas會比SVG更好，但是從我的測試中我發現Canvas對大對象和圓對象有問題。我有我的測試這裏的結果：

http://lezag2.linuxpl.info/wykresT2.html - 這是50.000矩形被= 500 pixsels

http://lezag2.linuxpl.info/wykresT4.html reslts - 這是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); 
} 

我很奇怪，爲什麼相比於SVG畫布有這樣煩惱的時候。我試圖谷歌我的問題，但只發現非常comlpex測試。有人可以解釋爲什麼帆布有這麼糟糕的時候？也是我的名字很好 - 我的意思是渲染時間？

編輯

我忘了說明我是如何呈現時間的。

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

這就是爲什麼我問，如果我不將其命名爲錯說「渲染時間」

Answer 1

你不能從你的測試推斷SVG比帆布快或慢，有以下幾個原因：

小原因：

• closePath是沒有必要的，尤其是在填充後。
• 您重新計算每個畫布循環上的開始/結束角度。
• fillStyle必須在畫布中轉換'rgb（...）'，而不是在svg中。

更重要的原因：

• 在1000×1000繪圖畫布50.000帆布500米半徑導致每個像素透支的 ... 78500！這與一個實際使用情況無關，這是非常煩人的 以得出任何結論。 （使用requestAnimationFrame），所以可以肯定的是你的畫布的代碼往往是等待其緩衝區能夠得出
  • 你不要畫在同步：

  更重要的原因。

殺理由：

• 你不衡量SVG的渲染時間，只是SVG創建+添加到DOM時間。
  在您的svg循環中不繪製單個像素：將執行實際渲染AFTER javascript代碼返回：只有這樣纔會看到重新排列是必要的，並重新繪製所有內容。 AFIK每個瀏覽器只有一個線程用於頁面上的所有操作：因此，您的程序將完全停止渲染，在此期間，您目前還沒有進行測量。

的Rq：你可以嘗試測量SVG通過使用短的setInterval，看到多少次兩個電話，而不是真正的間隔之間真的逝去繪製時間：這是當系統被卡住呈現的時刻。

---

底線：你是比較創建DOM對象，並將其添加到文檔VS上呈現出不同步畫布圈的時間。這些數字不能得出任何結論。

---