如何测试 javascript 代码的速度 - SVG vs CANVAS答案

【问题标题】：How to test speed of javascript code - SVG vs CANVAS如何测试 javascript 代码的速度 - SVG vs CANVAS
【发布时间】：2015-03-15 16:09:11
【问题描述】：

我有两个类似的例子，但一个使用 SVG，另一个使用 CANVAS：

使用 html5 画布：http://jsbin.com/yepigu/5 使用 SVG：http://jsbin.com/yumova

我需要知道哪个渲染更快。我需要在我的情况下使用什么？是否有一些在线工具或者我需要在代码中编写一些计时器？

【问题讨论】：

标签： html performance testing canvas svg

【解决方案1】：

要对 2 个备选方案进行性能测试，请在记录开始和结束时间的同时运行每个备选方案。

顺便说一句，我重新设计了您的画布描边线，使其在没有阴影的情况下工作，这应该会加快速度：

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

&lt;canvas id="canvas" width=600 height=600&gt;&lt;/canvas&gt;

【讨论】：

这主要衡量解析，因为渲染是异步的。除非 UA 提供内部工具来执行此操作，或者您加载某种具有特权访问权限的插件，否则无法准确衡量所要求的内容。如果有的话，那将是一个隐私漏洞。
好点——我的错。我将进行编辑以建议简单的经过时间测试。感谢您的支持:-)