如何測量2個功能完成一個網頁？

Question

所以我正在寫一個頁面，將測量繪製相同的東西，但一個在SVG和一個在畫布中的加載時間。

它繪製兩個 - svg花費更多的時間後繪製隨機位置和頁面加載正方形。但是這兩個時間都是一樣的，它看起來像是從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

您還在使用從畫布基準時間爲您SVG基準：

var secSVG = (after-before)/1000; 

他們不是應該是：

var secSVG = (afterSVG-beforeSVG)/1000;