javascript - 如何衡量一个网页何时完成2个功能？

Question

所以我正在编写一个页面，用于测量绘制相同内容的加载时间，但一个在 SVG 中，一个在 Canvas 中。

它在随机位置绘制正方形，并在绘制两者后加载页面 - svg 需要更多时间。但这两个时间是相同的，看起来就像是 Canvas 绘图的时间。我用来查看加载时间的方法很简单，只需从函数开始和结束处获取日期即可。这样我就知道需要多少时间。但是当我在另一幅画上尝试相同的技巧时，它给了我相同的时间 - 第一个( Canvas )

我做错了什么？或者也许我不能在一页上完成？

我的代码如下所示:

function draw(){
before = (new Date()).getTime();
//Draw Canvas
var ctx = document.getElementById('canvas').getContext('2d');
for(var i=0;i<10000;i++){

    //code for drawing Canvas- works and is not important in this question

}

//load time  Canvas                 
var after = (new Date()).getTime(); 
var sec = (after-before)/1000; 
var renTime = document.getElementById("loadingtime"); 
renTime.innerHTML = "Figury Canvas rysowały się: " + sec + " sekund."; 

 // draw svg 

 beforeSVG = (new Date()).getTime();

for (var i = 0; i < 100000; i++) {

    //code for drawing SVG - works and is not important in this question

}

//load time SVG                 
 var afterSVG = (new Date()).getTime(); 
 var secSVG = (after-before)/1000; 
 var renTimeSVG = document.getElementById("loadingtimeSVG"); 
 renTimeSVG.innerHTML = "Figury rysowały się: " + secSVG + " sekund."; 
}

Answer 1

您仍在使用 canvas 基准测试中的时间作为 svg 基准测试:

var secSVG = (after-before)/1000; 

他们不应该是:

var secSVG = (afterSVG-beforeSVG)/1000;