如何测试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>