如何測試JavaScript代碼的速度 - SVG VS帆布

Question

我使用SVG等使用Canvas兩個類似的例子，但一個：

HTML5的畫布：http://jsbin.com/yepigu/5 隨着SVG：http://jsbin.com/yumova

我需要知道哪些渲染速度更快。我需要在我的情況下使用什麼？ 有沒有一些在線工具，或者我需要做一些計時器到代碼？

Answer 1

要對2個備選方案進行性能測試，請在記錄開始&結束時間時運行每個備選方案。

BTW，我返工你的畫布描邊線沒有陰影的工作應速度高達：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 

 
var pts = [{x:22,y:59.45},{x:136,y:66},{x:170,y:99},{x:171,y:114},{x:183,y:125},{x:218,y:144},{x:218,y:165},{x:226,y:193},{x:254,y:195},{x:283,y:195},{x:292,y:202},{x:325,y:213},{x:341,y:134},{x:397,y:245},{x:417,y:548}]; 
 

 

 
ctx.lineCap='round'; 
 
ctx.lineJoin='round'; 
 
ctx.lineWidth=25; 
 
ctx.strokeStyle='red'; 
 
drawPolyline(pts); 
 
ctx.lineWidth=22; 
 
ctx.strokeStyle='pink'; 
 
drawPolyline(pts); 
 
ctx.lineWidth=2; 
 
ctx.strokeStyle='blue'; 
 
drawPolyline(pts); 
 

 
function drawPolyline(pts){ 
 
    ctx.beginPath(); 
 
    ctx.moveTo(pts[0].x,pts[0].y); 
 
    for(var i=1;i<pts.length;i++){ 
 
    ctx.lineTo(pts[i].x,pts[i].y); 
 
    } 
 
    ctx.stroke(); 
 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=600 height=600></canvas>