Как измерить, когда 2 функции выполнены на одной веб-странице?

Question

Так что я пишу страницу, которая будет измерять время загрузки рисунка того же самого, кроме одного в SVG и в Canvas.

Он рисует квадраты в случайных положениях и загрузках страниц после рисования обоих - 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;